html - Css div 与斜线并排

Question

我想创建 2 个 float 的 div 元素，它们将占据所有浏览器窗口的 50%。 左侧的 div 将具有浅绿色背景色。右侧将具有深绿色背景色。 好吧，就像将每个 div 设置为 50% 宽度一样简单。

但是，我需要左边的 div 以斜线结尾。 我附上了解释这个 div 应该是什么样子的图片。

我遵循了一些解释如何创建具有不同几何形状的元素的资源。 它似乎主要是关于设置边框值(例如右边框)和使相应的边框顶部/底部透明。

我面临的困难在于我对元素同时使用了百分比和像素。这并没有给出好的结果。

这里的代码:

 #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);
}