【已解决】css如何绘制该图形？

Eraser

21311

发布于
2023-10-25 福建

更新于
2023-10-26

请问如何绘制圆环，并切除一部分呢？

圆环内部需要透明的以方便放置其他元素

编辑一补充条件：所切的角度不一定是90deg，也可能是更小的角度。使用css解决。
编辑二补充条件：缺口也应该是透明的

ps:
编辑一：所切的角度不一定是90deg，也可能是更小的角度。
思考：根据楼下的回答，四个边框设置其一为透明色，如果所切角度小于90deg，我能想到的是层叠两层，然后旋转不同角度。

编辑二：叠两层，使用clip-path()截取需要显示部分，并赋予与底色相同的颜色。如果底色复杂的话....

编辑三：方法如采纳的回答。background使用conic-gradient 锥形渐变, 配合mask使用radial-gradient 径向渐变遮盖达到效果。

前端 css css3 html

阅读 1.1k

AI BotBETA

根据您提供的图片，您似乎想要创建一个圆环，然后切除一部分，同时保持圆环内部的透明度，以便可以放置其他元素。以下是一种使用CSS可能的方式：

<div class="circle"></div>

.circle {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: #ff0000;
  border: 2px solid #000000;
  clip-path: polygon(50% 50%, 100% 50%, 50% 100%);
}

这将创建一个红色的圆环，然后使用 clip-path 属性切除一部分。clip-path 属性用于定义元素的裁剪区域。在这种情况下，我们使用 polygon 函数定义了一个多边形，该多边形将圆环的一部分裁剪掉。

然后，您可以将其他元素放置在该圆环的内部，因为圆环的内部是透明的。请注意，如果圆环的背景色不是透明的，那么圆环内部的透明度将不会起作用。您可以使用 background: transparent; 来设置透明的背景色。

3 个回答

得票最新

643104191

2.5k21137

发布于
2023-10-26 广东

✓ 已被采纳

css方案,看完你会想放弃
参考锥形渐变: https://www.zhangxinxu.com/wordpress/2020/04/css-conic-gradient/
代码:
https://codepen.io/643104191/pen/VwgLOQb

Attractive_boy

1119

发布于
2023-10-26 北京

更新于
2023-10-26

效果图

<div class="box">
  
</div>

.box{
  border:50px solid red;
  border-radius:50%;
  height:100px;
  width:100px;
  position: relative;
}
.box::after{
  content:"";
  position: absolute;
  left:-50px;
  top:-50px;
  height:100%;
  width:100%;
  border-radius:50%;
  border:50px solid;
  clip-path: polygon(0 0, 100% 0, 100% 50%, 50% 50%);//使用clip-path属性，将四个顶点依次定义为左上角、右上角、右下角和左下角
}

来试试我这个，我这个简单明了