具有边框半径的 CSS 自定义形状

Question

我想通过 CSS 创建这样的东西。

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

Answer 1

您可以重叠几个 div 标签并使用倾斜效果。

HTML

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

CSS

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

Here's a jsFiddle