CSS div与斜线并排

Question

我想创建2个浮动div元素，这些元素将占据所有浏览器窗口的50％。 左div将具有浅绿色的背景色。 右侧将具有深绿色的背景色。 好吧，就像将每个div的宽度设置为50％一样容易。

但是，我需要左div以斜线结束。 我附上解释此div外观的图像。

我关注了一些资源，这些资源解释了如何创建具有不同几何形状的元素。 似乎主要是关于设置边框的值（例如，右边框），并使相应的边框顶部/底部透明。

Im面临的困难是有关Im使用百分比和像素作为元素的事实。 而且这不会产生良好的结果。

这段代码在这里：

 #div1 {
 text-decoration: none;
 color: white;
 font-weight: bold;
 display: inline-block;
 border-left: 30px solid transparent;
 border-bottom: 30px solid #24890d;
 height: 0;
 line-height: 50px;
 }

<div style="width: 100%;background-color: red">
<div style="float:left;width:50%;background-color:#58c333;padding-top: 11px">
aa
</div>
<div style="float:left;width:50%;background-color:#58c333;" id="div1">
bb
</div>
</div>

将使第二个div转到下一行。 我无法设定较低的百分比。 因为我不知道以像素为单位。 有没有更简单的方法可以做到这一点？

Answer 1

查看css calc（）函数，因为它应该可以帮助您完成此任务。 例如：

.my-element {
    width: calc(50% - 1px);
}

Answer 2

30像素边框会添加到#div1的50％宽度上，以补偿该额外边框，您可以添加

<div style="float:left;width:calc(50% - 30px);background-color:#58c333;" id="div1">

Answer 3

这是您要找的东西吗？ 通过添加box-sizing: border-box;我将两个div保持在同一行box-sizing: border-box; 到＃div1，我还将第一个div的内联css从padding: 11px为padding: 12px 。

  #div1 { text-decoration: none; color: white; font-weight: bold; display: inline-block; border-left: 30px solid transparent; border-bottom: 30px solid #24890d; height: 0; line-height: 50px; box-sizing: border-box; } 

 <div style="width: 100%;background-color: red"> <div style="float:left;width:50%;background-color:#58c333;padding-top: 12px"> aa </div> <div style="float:left;width:50%;background-color:#58c333;" id="div1"> bb </div> </div> 

Answer 4

如果不那么尖锐，则可以使用渐变，最后使用flexmodel绘制一条斜线，并使其通过多条线。

 .oblique { display:flex; background:linear-gradient(to left, green 50%,tomato 50%) } .oblique:before { content:''; background:linear-gradient(to top left, green 49%,tomato 51%); display:block; width:3em; order:1; } .oblique .first { order:0; } .oblique .first + div { order:2; } 

 <div class="oblique"> <div class="first"><p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p> </div> <div><p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. </p> </div> </div> 

Answer 5

box-sizing：border-box因此，边框包含在宽度计算中

 #div1 { text-decoration: none; color: white; font-weight: bold; display: inline-block; border-left: 30px solid transparent; border-bottom: 30px solid #24890d; height: 0; line-height: 50px; box-sizing: border-box; /* Added this */ } 

 <div style="width: 100%;background-color: red"> <div style="float:left;width:50%;background-color:#58c333;padding-top: 11px"> aa </div> <div style="float:left;width:50%;background-color:#58c333;" id="div1"> bb </div> </div>