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

问题描述：

enter image description here

jsbin为了方便

没你通过张贴那个jsbin来回答你自己的问题？ –

你的头衔说“如何”，但你的问题说“有可能”。假设后者，答案是“是”。假设前者，答案是“通过编写一大堆CSS规则来定位颜色样式”。就我个人而言，我不会浪费你的时间，除非你真的很难找到让自己忙碌的事情。 – 2015-06-20 03:03:07

答

你可以尝试这样的事情来创建一个关键形状：

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

这看起来像我想要的关键形状，但造型需要在附加到问题的图像中指示的部分内完成。（我没有控制权来修改其余的div） – Manan

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

相关推荐