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

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



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

最佳答案

您可以重叠一些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

关于css - 具有边框半径的CSS自定义形状，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/24687611/