Html 如何在css中制作半圆。（没有边框和轮廓）_Html_Css

Html 如何在css中制作半圆。（没有边框和轮廓）

html css

Html 如何在css中制作半圆。（没有边框和轮廓）,html,css,Html,Css,我想用css画一个半圆。（无边界和外部）我也试过这个。但是，无法 clip-path: circle(100% at 0%); 我尝试将剪辑路径更改为50%，并且您必须对元素具有宽度和高度 .wrapper{ 宽度：100%；显示器：flex；证明内容：中心；对齐项目：居中； } .半圆{ 宽度：100px；高度：100px；背景颜色：绿色；剪辑路径：圆形（0%时为50%）； } 我不确定这是否是您想要的，但您可以使用以下内容： #圆圈{ 背景色：黑色；宽度：100px；

我想用css画一个半圆。（无边界和外部）

我也试过这个。但是，无法

clip-path: circle(100% at 0%);

我尝试将剪辑路径更改为50%，并且您必须对元素具有宽度和高度

.wrapper{
宽度：100%；
显示器：flex；
证明内容：中心；
对齐项目：居中；
}
.半圆{
宽度：100px；
高度：100px；
背景颜色：绿色；
剪辑路径：圆形（0%时为50%）；
}

我不确定这是否是您想要的，但您可以使用以下内容：

#圆圈{
背景色：黑色；
宽度：100px；
高度：100px；
边界半径：50%；
}
#容器{
宽度：50px；
溢出：隐藏；
}

您可以使用画布制作几乎任何您想要的形状。尝试canvas的.arc（）属性。 .弧（x、y、r、星形、端角），其中： x:x圆心坐标 y:y圆心坐标 r：圆的半径 startAngle：以弧度为单位绘制圆弧的起始角度 endAngle：以弧度为单位绘制圆弧的结束角

<!DOCTYPE HTML>
<html>
  <head>
    <style>
      body {
        margin: 0px;
        padding: 0px;
      }
    </style>
  </head>
  <body>
    <canvas id="myCanvas" width="578" height="200"></canvas>
    <script>
      var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');

      context.beginPath();
      context.arc(100, 100, 50, 0*Math.PI,Math.PI, false);
      context.closePath();
      context.fillStyle = 'red';
      context.fill();
    </script>
  </body>
</html>


身体{
边际：0px；
填充：0px；
}
var canvas=document.getElementById（'myCanvas'）；
var context=canvas.getContext（'2d'）；
context.beginPath（）；
弧（100,100,50,0*Math.PI，Math.PI，false）；
closePath（）；
context.fillStyle='red'；
context.fill（）；

这里有相同的JSFIDLE链接：


.半圆：在{
内容：“；
高度：100px；
宽度：100px；
边界半径：50%；
位置：绝对位置；
背景色：#eee；
}
半圆形{
位置：相对位置；
高度：50px；
宽度：100px；
溢出：隐藏；
}

我希望它能起作用。

你说“无边框”是什么意思？请再读一遍：并尝试使用最多的剪辑路径：圆圈（50%），将整个圆圈保持在元素本身内；（或剪辑路径：圆圈（50%为0%）；如果这是您的真实预期结果）相关：如果高度：25%；宽度：60%；那么，以内部div的高度和宽度为例？我使用像素，我认为在这种情况下更好。你试过百分比吗？

    <!DOCTYPE HTML>
    <html>
         <head>
              <style>
                     .semicircle:before {
                       content: "";
                       height: 100px;
                       width: 100px;
                       border-radius: 50%;
                       position: absolute;
                       background-color: #eee;
                     }

                     .semicircle {
                       position: relative;
                       height: 50px;
                       width: 100px;
                       overflow: hidden;
                     }
              </style>
       </head>
       <body>
            <div class="semicircle"></div>
       </body>
</html>