Question

我正在尝试使用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>

Answer 1

像这样的东西应该为你做...调整颜色和大小，你就完成了。

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

如何使用HTML和CSS绘制不同的形状？

1 个答案: