如何使用HTML和CSS繪製不同的形狀？

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

來源

2015-06-24 Meenakshi A

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

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

底部邊框我想曲線形狀 –

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

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

來源

2015-06-24 13:22:14 Aaron

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

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

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

如何使用HTML和CSS繪製不同的形狀？

回答

相關問題