【CSS】CSS绘制扇形和三角形

古城微笑少年丶 2022-11-29 03:02 264阅读 0赞

#### 1. CSS绘制三角形 ####

CSS绘制三角形主要用到的是border属性，也就是边框。

我们平时在给盒子设置边框的时候，往往都设置很窄，就可能误以为边框是由矩形组成的。实际上，border属性是右三角形组成的，下面我们看一个例子：

div { 
        width: 0;
        height: 0;
        border: 100px solid;
        border-color: orange blue red green;
    }

我们将元素的长宽都设置为0，显示出来的效果是这样的：

![在这里插入图片描述][20200818221448188.png]  
所以我们就可以根据border这个特性来绘制三角形：

**（1）三角1**

div { 
        width: 0;
        height: 0;
        border-top: 50px solid red;
        border-right: 50px solid transparent;
        border-left: 50px solid transparent;
    }

![在这里插入图片描述][20200818222156852.png_pic_center]  
**（2）三角2**

div { 
        width: 0;
        height: 0;
        border-bottom: 50px solid red;
        border-right: 50px solid transparent;
        border-left: 50px solid transparent;
    }

![在这里插入图片描述][20200818222359330.png_pic_center]  
**（3）三角3**

div { 
        width: 0;
        height: 0;
        border-left: 50px solid red;
        border-top: 50px solid transparent;
        border-bottom: 50px solid transparent;
    }

![在这里插入图片描述][20200818222627774.png]  
**（4）三角4**

div { 
        width: 0;
        height: 0;
        border-right: 50px solid red;
        border-top: 50px solid transparent;
        border-bottom: 50px solid transparent;
    }

![在这里插入图片描述][20200818222759770.png]  
**（5）三角5**

div { 
        width: 0;
        height: 0;
        border-top: 100px solid red;
        border-right: 100px solid transparent;
    }

![在这里插入图片描述][20200818223054151.png]  
还有很多，就不一一实现了，总体的原则就是通过上下左右边框来控制三角形的方向，用边框的宽度比来控制三角形的角度。

#### 2. CSS绘制扇形 ####

用CSS实现扇形的思路和三角形基本一致，就是多了一个圆角的样式，首先先实现一个90°的扇形：

div{ 
        border: 100px solid transparent;
        width: 0;
        heigt: 0;
        border-radius: 100px;
        border-top-color: red;
    }

![在这里插入图片描述][2020081822434193.png]  
其他方向也类似，这里只实现了90°的扇形，对于任意的角度的扇形后面再补充吧！

[20200818221448188.png]: /images/20221124/d67cdcbb74d9485da6ff697feea3b406.png?
[20200818222156852.png_pic_center]: /images/20221124/fbaec97e683c44489df2706d70ea3a35.png
[20200818222359330.png_pic_center]: /images/20221124/e0c22269814f4db6a951b06495709ce5.png
[20200818222627774.png]: /images/20221124/6455f685ceca41a1b91d7e056de2c5e1.png?
[20200818222759770.png]: /images/20221124/2a3874e8f4624eca8592e6aed22f08ad.png?
[20200818223054151.png]: /images/20221124/360cb33cab8048e4a3362ccd24111da3.png?
[2020081822434193.png]: /images/20221124/053519611e224206a5c87ddc054957ab.png?