阅读 934
使用css绘制任意角度的扇形

使用css绘制任意角度的扇形

开始

先说思路吧,首先要绘制出一个扇形,肯定是从一个圆中,截取出来。因此我们只需一个平行四边形,以短边为半径,画一个圆,取与平行四边形重合的部位,就是一个扇形了,如下图。

1.jpg

实现

首先,其实我们只需要右上半部分,其实就是四分之一个圆,我们可以先画一个正方形div(黄色),然后画一个2倍宽度的正方形circle(蓝色)绝对定位到右上角,然后将div的overflow设为hidden。

    <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    #div {
        margin-top: 200px;
        margin-left: 200px;
        width: 100px;
        height: 100px;
        position: relative;
        background: yellow;
        overflow: hidden;
    }
    #circle {
        position: absolute;
        right: 0;
        top: 0;
        width: 200px;
        height: 200px;
        border-radius: 50%;
        background: blue;
        overflow: hidden;
    }
  </style>
</head>
<body>
  <div id="div">
    <div id="circle"></div>
  </div>
</body>
</html>
复制代码

2.jpg

然后把div的黄色背景去了,再在circle中绝对定位一个短边和半径一样的平行四边形到右上角。为什么要在circle中定位呢,因为circle是圆弧的,使用overflow: hidden才能截断长边,形成圆弧。而div是正方形,截断不能形成扇形。

形成平行四边形的方法就要用到transform中的skew了,简单来说就是旋转x轴和y轴,使正方形拉伸为平行四边形。

    <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    #div {
        margin-top: 200px;
        margin-left: 200px;
        width: 100px;
        height: 100px;
        position: relative;
        overflow: hidden;
    }
    #circle {
        position: absolute;
        right: 0;
        top: 0;
        width: 200px;
        height: 200px;
        border-radius: 50%;
        background: blue;
        overflow: hidden;
    }
    #d1 {
        transform: skewX(135deg);
        transform-origin: 0 100%;
        position: absolute;
        right: 0;
        top: 0;
        background: red;
        width: 100px;
        height: 100px;
    }
  </style>
</head>
<body>
  <div id="div">
    <div id="circle">
      <div id="d1"></div>
    </div>
  </div>
</body>
</html>
复制代码

3.png

再把circle的背景色就去掉,就能只剩下红色的扇形了。

4.jpg

结语

离谱的是,去看skew的时候,被transform操作中的坐标轴整晕了,得仔细研究下这个skewX,skewY,rotateX,rotateY的具体变换操作,因为平时可能使用rotate的时候也不会把XY分开了操作,试了一下,反正结果难以理解,希望还能活着走出来。

文章分类
前端
文章标签