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

Question

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

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

Answer 1

您可能希望了解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>

检查jsFiddle

Answer 2

您可以重叠几个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