实现一扇形生成器

itclanCoder

发布于 2022-01-25 08:32:10

1.4K1

发布于 2022-01-25 08:32:10

文章被收录于专栏：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>

本文参与腾讯云自媒体同步曝光计划，分享自微信公众号。

原始发表：2022-01-05，如有侵权请联系 cloudcommunity@tencent.com 删除

css