并排创建倾斜div

Question

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

我搜索了许多使用过的歪斜，但我试过但并没有像图像一样。 只是扭曲了div。不是里面的内容。

以下是我的尝试：

＆＃13;

＆＃13;

.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%;
    
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

这是怎么回事我使用了渐变背景和CSS网格来创建两个不偏斜的div。几点需要注意：

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

＆＃13;

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;