如何使用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>