2013-01-05 35 views
1

enter image description here如何在css中創建不同的形狀?

我想創建一個形狀像上傳的圖像與CSS。請讓我知道如何做到這一點。

謝謝

+3

嘗試http://www.css3shapes.com/和http://www.paulund .co.uk/how-to-create-different-shapes-in-css –

+1

這似乎是一個普通的巨大圓圈。在CSS3中,圈子(我認爲是空洞的)很容易 –

回答

3

這並不困難。你在一個包裝器中創建一個圓圈,它可以剪出你不需要的東西。

demo

HTML

<div class='shape-wrap'> 
    <div class='shape'></div> 
</div> 

相關CSS

.shape-wrap { 
    overflow: hidden; 
    width: 32em; height: 8em; 
} 
.shape { 
    box-sizing: border-box; 
    margin: -175% -50%; 
    width: 200%; height: 800%; 
    border: solid 2em dodgerblue; 
    border-radius: 50%; 
    box-shadow: inset 0 0 .5em .25em dimgrey; 
}