2015-06-24 53 views
-1

我想繪製使用HTML和CSS下面附加的圖像,但我無法得到我的預期輸出。如何使用HTML和CSS繪製不同的形狀?

<html> 
    <style type="text/css"> 
     #center_cir { 
      border-left: 48px solid transparent; 
      border-right: 50px solid transparent; 
      height: 0; 
      width: 100px; 
      border-top: 100px solid red; 
      border-top-left-radius:60px; 
      border-top-right-radius:60px; 
     } 
     #circle { 
      width: 140px; 
      height: 120px; 
      background: red; 
      -moz-border-radius: 60px; 
      -webkit-border-radius: 60px; 
      border-radius: 60px; 
     } 
    </style> 
    <div id="center_cir"> 
     <!--<div id="circle"> 
     </div>--> 
    </div> 

</html> 
+0

你真的想創造?這是什麼形狀? –

+0

[https://coveloping.com/tools/css-shapes-generator](https://coveloping.com/tools/css-shapes-generator),那裏可能有更多的網站,生成CSS形狀,如果你做搜索 – musefan

+0

底部邊框我想曲線形狀 –

回答

0

像這樣的東西應該爲你做...調整顏色和大小,你就完成了。

#center_cir { 
 
    border-left: 48px solid transparent; 
 
    border-right: 50px solid transparent; 
 
    height: 0; 
 
    width: 100px; 
 
    border-top: 100px solid red; 
 
    border-top-left-radius:60px; 
 
    border-top-right-radius:60px; 
 
    position: relative; 
 

 
} 
 
#center_cir:after { 
 
    background: blue; 
 
    border-radius: 90px 90px 0 0; 
 
    content: ""; 
 
    height: 44px; 
 
    position: absolute; 
 
    width: 100px; 
 
}
<div id="center_cir"></div>

+0

tat底部曲線應該像這樣反向( –

+0

然後將邊框半徑更改爲左上角,右上角....我更新了我的答案。 – Aaron

+0

它應該看起來像單獨的圓圈......紅色底邊框本身彎曲 –