Question

因此，例如，一半是在一个角度倾斜，另一半是在另一个角度倾斜，仅使用1个div。

原因是我将在Div中有文字，所以我不能把它分成两部分。

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

Answer 1

请参考此示例，因为您尚未添加任何代码，因此无法猜测您的方法。但是，您可以将background:linear-gradient添加到parent div。

＆＃13;

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

＆＃13;

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

＆＃13;

为其他浏览器支持添加vendor prefixes。

Answer 2

在一个元素上，你不能拥有两种不同的风格，并且在规则下应用规则，例如“如果宽度超过50％则应用样式nr.2”

而不是那样，创建一些简单的结构（下面的代码片段）。

!!我不推荐这个，但您也可以通过使用渐变以有限的方式在一个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>

是否可以单独设置2个1 div的样式？

2 个答案: