并排创建倾斜div

Question

如何使用两个div创建像图像一样的图像？

我搜索了许多使用过的偏斜，但尝试了一下，但并没有完全像图像一样。 仅使div倾斜。 不是里面的内容。

这是我尝试过的：

 .container{ width: 100%; } .left{ float: left; background: red; height: 50px; width: 50%; -ms-transform: skew(-30deg, 0deg); -webkit-transform: skew(-30deg, 0deg); transform: skew(-30deg, 0deg); } .right{ float: left; background-color: #666; height: 50px; width: 50%; } 

 <div class="container"> <div class="left"> LEFT </div> <div class="right"> RIGHT </div> </div> 

Answer 1

这怎么样。 我使用了渐变背景和CSS网格在内部创建了两个不倾斜的div。 注意事项：

• 您将需要在两边都使用填充，以防止文本在颜色变化的顶部出现。
• 您可能需要使用webkit来支持线性渐变的浏览器，具体取决于您打算支持哪种较旧的浏览器。

 .container { background: linear-gradient(45deg,#FF0000 50%,#666666 50%); display: grid; grid-template-columns: auto auto; width: 100%; } .side { background-color: transparent; color: #FFFFFF; height: 50px; } 

 <div class="container"> <div class="side"> test </div> <div class="side"> test </div> </div>