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

Question

例如.我需要能够使用CSS创建一个关键形状

jsbin为方便起见

Answer 1

你可以尝试这样的事情:

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

<div id="key"></div>