css实现左上角缺口的圆环？

想睡觉

133

发布于
2023-09-04 四川

新手上路，请多包涵

实现带缺口的圆环

前端 less css

阅读 2.7k

1 个回答

得票最新

玛拉_以琳

8.7k41541

发布于
2023-09-04 上海

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    div {
      width: 200px;
      height: 200px;
      background:
        radial-gradient(closest-side circle, royalblue 99%, transparent 100%) center top/25% 25% no-repeat,
        conic-gradient(transparent 10%, royalblue 90%);
      -webkit-mask: radial-gradient(closest-side circle, transparent 50%, red 51% 99%, transparent 100%);
    }
  </style>
</head>

<body>
  <div></div>
</body>

</html>

更多参看:

https://segmentfault.com/a/1190000043622887

查看全部 1 个回答

推荐问题

遇到一道设计模式的面试题，各位大佬看下如何解决,题目要求是优化这段业务代码？
遇到一道设计模式的面试题，各位大佬看下如何解决,题目要求是优化这段业务代码条件是布尔值或者函数返回值，cb 是函数 {代码...}
27 回答13.1k 阅读
扁平化数组转换成树形?
背景：需要将扁平化数组转换成树形数组。比如原始数组如下： {代码...} 期望转换后的数据 {代码...}
8 回答3.5k 阅读✓ 已解决
省市区街道数据在哪里可以下载？
省市区街道数据在哪里可以下载？
6 回答1.3k 阅读✓ 已解决
Vue项目一个报错无法找到原因?
排查了好久实在没有找到哪儿出了问题，时不时弹出来，编译结果又是正常的，尝试排查了好久但是一直没有办法排查出来，有遇到过这种报错的同学吗？或者有没有同学提供一种排查思路，因为我真的搞懵逼了。哈哈哈。
5 回答5.3k 阅读✓ 已解决
网站的不同域名互相跳转如何保持登录态？
一个网站部署了多个域名（不是子域名），比如：www.abc.com和www.aaa.com,如何从一个域名跳转到另一个域名的时候，仍然保持登录态呢？
6 回答1.1k 阅读
如何在浏览器开发者工具中导入本地JS文件并直接运行？
在浏览器的开发者工具源代码面板下的工作区导入一个本地文件夹，然后创建一个js文件，里面写一段js脚本，那么我此时可以直接运行这个js脚本吗？如果可以该怎么操作。
3 回答1.7k 阅读
前端有没有办法实现页面截图？
前端有没有办法实现页面截图？不是html-to-canvas那种实现，而是类似于windows上各种截图工具那样，直接截取屏幕上图像目前搜到的全是html-to-canvas的方案
3 回答2k 阅读✓ 已解决

css实现左上角缺口的圆环？

遇到一道设计模式的面试题，各位大佬看下如何解决,题目要求是优化这段业务代码？

扁平化数组转换成树形?

省市区街道数据在哪里可以下载？

Vue项目一个报错无法找到原因?

网站的不同域名互相跳转如何保持登录态？

如何在浏览器开发者工具中导入本地JS文件并直接运行？

前端有没有办法实现页面截图？