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

Question

我正在尝试使用 CSS3 实现以下形状而不使用 canvas，谁能帮助我实现以下形状？

Answer 1

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: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>

Answer 3

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>

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

How to create custom shapes using css3 in div?

css

css-shapes