如何在div中使用css3创建自定义形状？

Question

我正在尝试使用CSS3而不使用画布来实现以下形状，有没有人可以帮助我实现以下形状？

Answer 1

您可以CSS 2D transforms使用skewY：

div{
  position:relative;
  width:200px; height:50px;
  background:green;
  margin:0 100px;
  transform-origin:100% 0;
  transform:skewY(-30deg);
}
div:before, div:after{
  content:'';
  position:absolute;
  top:0;
  width:50%; height:100%;
  transform:skewY(30deg);
  background:red;
}
div:before{
  right:100%;
  transform-origin:100% 0;
}
div:after{
  left:100%;
  transform-origin:0 0;
}

<div></div>

请注意，您需要根据需要支持的浏览器添加供应商前缀。有关canIuse

的更多信息

Answer 2

transform: skewY(Ndeg)获取角度效果，然后选择边距或transform: translateY(Npx)垂直移动div。工作范例：

.red,
.green {
  width: 100px;
  height: 50px;
  float: left;
  text-align: center;
  vertical-align: middle;
  line-height: 50px;
}

.red {
  background: red;
}

.green {
  background: lime;
}

.first {
  /*margin-top:56px;*/
  transform: translateY(56px)
}

.second {
  transform: skewY(150deg) translateY(28px);
  /*transform: skewY(150deg);
  margin-top:28px;*/
}

.second span {
  transform: skewY(30deg);
  display: inline-block;
}

.third {}

<div id="container">
  <div class="red first"><span>div</span></div>
  <div class="green second"><span>div</span></div>
  <div class="red third"><span>div</span></div>
</div>

Answer 3

您可以使用transform:skew() CSS属性

这是一个代码示例

.rect {
  width:100px;
  height: 50px;
  background: red;
}

.skew {
  width: 100px;
  height: 50px;
  background:#33FF99;
  transform:skew(0deg,-27deg);
}

.r1, .r2, .s1{
  position:absolute;
}

.r1{
  top:60px;
  left:0;
}

.r2 {
  top:10px;
  left:200px;
}

.s1{
  top:35px;
  left:100px;
}

<div class="rect r1"></div>
<div class="skew s1"></div>
<div class="rect r2"></div>