并排创建倾斜 div答案

【问题标题】：Create skew div side by side并排创建倾斜 div
【发布时间】：2018-03-22 14:58:09
【问题描述】：

如何使用两个 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>

【问题讨论】：

显示您尝试过的内容。
jsfiddle 我做了什么
倾斜而不影响 div 内的内容
请在您的问题中发布代码，以便有相同问题的人可以搜索。
你去。现在问题看起来不错。

标签： html css-transforms skew

【解决方案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>

【讨论】：