zoukankan      html  css  js  c++  java
  • CSS实现任意角度扇形

      参考之前思路:conic-gradient:圆锥形渐变存在兼容性问题,无法使用,要不然其实实现效果也蛮好的

    <div class="precoss">
        <div class="skew"></div>
    </div>
    
    .precoss{
      width 26px
      height 26px
      border:2px solid rgba(22,143,202,1);
      border-radius:50%;
      margin-right 10px
      position relative
      overflow hidden
      font-size 0
      .skew{
        position absolute
        top -1px
        left -1px
        width 28px
        height 28px
        border-radius: 50%;
        background: conic-gradient(#168fca 0, #168fca 50%, #fff 50%, #fff 100%);
      }
    }

      所以放弃,只能自己手写,参考第2种思路

    <div class="precoss" v-if="item.progress <= 50">
      <div class="skew1"></div>
      <div  class="skew2" :style="{'transform': `rotate(${item.progress*3.6}deg)`}"></div>
    </div>
    <div class="precoss" v-else>
      <div class="skew1" :style="{'transform': `rotate(${(item.progress - 50)*3.6}deg)`}"></div>
      <div  class="skew2 per50"></div>
    </div>

      css如下

    .precoss{
      width 30px
      height 30px
      border-radius 50%
      background #168fca
      position relative
      margin-right 10px
      .skew1{
        background-color: #ffffff;
         26px;
        height: 26px;
        border-radius: 50%;
        clip:rect(0,13px,auto,0);
        position: absolute;
        top 2px
        left 2px
      }
      .skew2{
        background-color: #ffffff;
         26px;
        height: 26px;
        border-radius: 50%;
        clip:rect(0,auto,auto,13px);
        position: absolute;
        top 2px
        left 2px
        &.per50{
          background-color: #168fca;
           28px;
          height: 28px;
          top 1px
        }
      }
    }

      因为存在超过50%情况,所以简单的做了一个判断。

      效果:

  • 相关阅读:
    git 分支报错: error: The following untracked working tree files would be overwritten by merge
    JSAPI唤起微信支付
    解决html body 元素在底部设置padding-bottom 或者margin-bottom失效的问题
    Java中的接口
    Java中的抽象类
    IDEA快捷键
    Java的访问控制权限修饰符
    Java中的包机制和import机制
    Java中的final关键字
    Java面向对象三大特征
  • 原文地址:https://www.cnblogs.com/goloving/p/12895752.html
Copyright © 2011-2022 走看看