2015-06-24 132 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

它应该看起来像单独的圆圈......红色底边框本身弯曲 –