带边框半径的CSS自定义形状

我想通过CSS创建类似的东西

---

只想使用CSS来创建这个带有边框半径的自定义形状。有什么想法吗？

您可能想了解CSS3 2D转换。可以做类似的事情，但也有局限性。我试图做一些类似于参考形状的事情：

// CSS
#shape {
    position: relative;
    text-align: center;
    padding: 12px;
    margin-bottom: 6px;
    height: 60px;
    width: 200px;
    margin:30px;
}

#shape:after {
    border-radius: 5px;
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    width: 100%;
    background: green;
    -webkit-transform: skew(-5deg, -3deg);
    -moz-transform: skew(-5deg, -3deg);
    -ms-transform: skew(-5deg, -3deg);
    -o-transform: skew(-5deg, -3deg);
    transform: skew(-5deg, -3deg);
}

// HTML
<div id="shape"></div>

---

检查

可以重叠几个div标记并使用倾斜效果

HTML

---

只使用CSS？艰难的工作。我建议您在illustrator中绘制此形状，并将其导出为SVG代码。

<div class="container">
    <div class="shape shape1"></div>
    <div class="shape shape2"></div>
    <div class="shape shape3"></div>
</div>

.container {
  position: relative;
  padding: 30px;
}
.shape {
  position: absolute;
  text-align: center;
  padding: 12px;
  height: 60px;
  width: 200px;
}
.shape:after {
  border-radius: 5px;
  content: '';
  position: absolute;
  height: 100%;
  width: 100%;
  background: green;
  top: 0;
  left: 0;
}
.shape1:after {
  -webkit-transform: skew(-5deg, -3deg);
  -moz-transform: skew(-5deg, -3deg);
  -ms-transform: skew(-5deg, -3deg);
  -o-transform: skew(-5deg, -3deg);
  transform: skew(-5deg, -3deg);    
}
.shape2:after {
  -webkit-transform: skew(0deg, -1deg);
  -moz-transform: skew(0deg, -1deg);
  -ms-transform: skew(0deg, -1deg);
  -o-transform: skew(0deg, -1deg);
  transform: skew(0deg, -1deg);
  top: 4px;
  left: 3px;
}
.shape3:after {
  -webkit-transform: skew(3deg, -2deg);
  -moz-transform: skew(2deg, -2deg);
  -ms-transform: skew(2deg, -2deg);
  -o-transform: skew(2deg, -2deg);
  transform: skew(2deg, -2deg);
  top: 2px;
  left: -5px;
}
.set2 {
  margin-top: 80px;
}
.set2 .shape2:after {
  background: red;
}
.set2 .shape3:after {
  background: blue;
}