如何使用CSS创建自定义形状？

Question

例如。我需要能够使用CSS

创建一个关键形状

为方便起见，

jsbin

Answer 1

您可以尝试这样的事情：

＆＃13;

＆＃13;

map

＆＃13;

#key {
  margin: 50px 0 0 100px;
  width: 200px;
  height: 30px;
  border-radius: 30px;
  position: relative;
  background: red;
}
#key:after {
  content: '';
  position: absolute;
  bottom: 100%;
  right: 20px;
  height: 20px;
  width: 50px;
  background: red;
}
#key:before {
  content: '';
  position: absolute;
  border: 30px solid red;
  border-radius: 50%;
  height: 60px;
  width: 60px;
  left: -100px;
  top: 50%;
  margin-top: -60px;
}

＆＃13;

＆＃13;

＆＃13;