并排创建偏斜 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>

并排创建偏斜 div

Create skew div side by side

html

skew

css-transforms