是否可以分别设置 1 个 div 的 2 个半部分的样式？

Question

例如，一半以一个角度倾斜，另一半以另一个角度倾斜，仅使用 1 个 div。

原因是我将在 Div 中包含文本，所以我不能将它分成两部分。

非常感谢您提供的任何信息或想法。

Answer 1

将此作为示例，因为您没有添加任何代码，无法猜测您的方法。但是您可以通过将background:linear-gradient 添加到parent div 来做到这一点。

div{
  width:300px;
  height:300px;
  background:linear-gradient(90deg, red 50%, green 50%);
}
div h1{
  text-align:center;
}

<div>
<h1>Hello !!!</h1>
</div>

添加vendor prefixes 以获得其他浏览器支持。

Answer 2

在一个元素上通常不能有两种不同的样式，规则是在条件下应用，例如“如果宽度超过 50%，应用样式 nr.2”

而不是这样，创建一些简单的结构（下面的sn-p）。

!!我不推荐这个，但你也可以通过使用渐变在一个 div 上以有限的方式显示 2 种不同的颜色，检查这个工具http://www.colorzilla.com/gradient-editor/

但除此之外，你应该做一些结构，因为如果你需要更多的样式而不是仅仅 2 种颜色，那简直是必要的。

.container, .container2{position:absolute; top:0; left:0; margin:auto; width:200px; height:200px; background:black;}
.bg-1, .bg-12
{height:100%; width:50%; position:absolute; top:0; left:0; background:#CCF;}

.bg-2, .bg-22{height:100%; width:50%; position:absolute; top:0px; left:50%; background:#FCC;}
.text{width:100%; height:100%; position:absolute; top:0; left:0; font-size:80px; text-align:center; vertical-align:middle; line-height:200px;}
.container2{left:230px !important;}

.bg-12{box-shadow: inset 0px 0px 52px 0px rgba(0,0,0,0.75);}
.bg-22{box-shadow: inset 0px 0px 52px 0px rgba(0,255,0,0.75);}

<div class="container">
<div class="bg-1"></div>
<div class="bg-2"></div>
<div class="text">
Text
</div>
</div>
<div class="container2">
<div class="bg-12"></div>
<div class="bg-22"></div>
<div class="text">
Text
</div>
</div>