实现一扇形生成器

最新推荐文章于 2022-07-26 19:52:06 发布

原创最新推荐文章于 2022-07-26 19:52:06 发布 · 904 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #html #js #css3 #github

本文介绍了如何使用SVG、HTML和CSS3的conic-gradient属性实现扇形生成器。通过模拟三角形和应用圆锥渐变，创建出各种扇形效果。需要注意的是，conic-gradient的浏览器支持度有限，可能需要借助垫片库解决兼容性问题。

虽互不曾谋面,但希望能和您成为笔尖下的朋友

以读书,技术,生活为主,偶尔撒点鸡汤

不作,不敷衍,意在真诚吐露,用心分享

点击左上方,可关注本刊

标星公众号（ID：itclanCoder）

(具体实例效果可以点击文末左下方阅读原文)

实现扇形生成器

svg实现

<svg width="226" :height="226">
  <path d="M 199.56 40.37 A 113 113 0 0 0 2.47 89.51 L 113 113 Z" fill="#B4331A"></path>
</svg>

模拟三角

.sector-container {
    width: 160px;
    height: 160px;
    background: transparent;
    border-radius: 50%;
    position: relative;
    overflow: hidden;
  }
  .sector-container span {
    position: absolute;
    left: 50%;
    top: 0;
    width: 0;
    height: 0;
    border-style: solid;
    transform-origin: bottom center;
  }
  .sector-container span:nth-child(1) {
    transform: translate(-50%, 0) rotate(15deg);
    border-width: 80px 21.4359px 0 21.4359px;
    border-color: #00adb5 transparent transparent transparent;
  }
  .sector-container span:nth-child(2) {
    transform: translate(-50%, 0) rotate(45deg);
    border-width: 80px 21.4359px 0 21.4359px;
    border-color: #00adb5 transparent transparent transparent;
  }

html模板

<div class="sector-container">
  <span></span>
  <span></span>
</div>

使用conic-gradient属性

.sector {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: conic-gradient(transparent 11.11%, #00adb5 11.11% 33.33%, transparent 22.22%);
}

注意事项

conic-gradient支持性不是很好，谨慎使用，目前只在chrome 69及以上支持

可以使用polyfill垫片库，解决兼容性问题。垫片库会根据css语法，生成对应的圆锥渐变图案，并且转化为 base64 代码

<script src="//cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<script src="//leaverou.github.io/conic-gradient/conic-gradient.js"></script>