CSS画矩形、圆、半圆、弧形、半圆、小三角、疑问框

转载自：https://blog.youkuaiyun.com/lzgs_4/article/details/46827761

 

在网页中，经常会用到各种Icon，如果老是麻烦设计狮画出来不免有些不好意思，所以有时候我们也可以用CSS写出各种简单的形状，一来可以减轻他们的负担，二来也可以使用CSS替代图片，提高加载速度。

在网页中，结合CSS能画出来的最基本的形状就是矩形，所以，我们可以在矩形的基础上做出各种变换，得到很多不同的形状。

这次的分享主要用到圆角、边框、定位等知识点（鉴于IE9以上才支持圆角，暂时不考虑兼容问题）

先做一些通用的基础设置：

 

[css]  view plain  copy

 

1. div {  
2.     width: 100px;  
3.     height: 100px;  
4.     line-height: 100px;  
5.     text-align: center;  
6.     margin: 100px;  
7.     background-color: red;  
8. }  

毫无疑问，结合HTML就可以画出最基本的矩形：

 

 

[html]  view plain  copy

 

1. <div>矩形</div>  

效果：

 

 

下面针对矩形做一些变换：

圆形：

 

[html]  view plain  copy

 

1. <div class="circle">圆形</div>  

border-radius圆角的四个值按顺序取值分别为：左上、右上、右下、左下。

 

原理：四个角都是圆角：四个角的取值为50%或为宽和高一样的值（此处即100px）。

 

[css]  view plain  copy

 

1. .circle {  
2.     border-radius: 50%;  
3. }  

 

 

半圆：

 

[html]  view plain  copy

 

1. <div class="semi-circle">半圆</div>  

原理：左上、右上角是圆角，右下、左下角是直角： 左上角、右上角的值为宽和高一样的值，右下角、左下角的值不变（等于0）；另外，因为还要设置高度值为原来高度的一半才是标准的半圆。

 

 

[css]  view plain  copy

 

1. .semi-circle {  
2.     border-radius: 100px 100px 0 0;  
3.     height: 50px;  
4. }  

扇形：

 

 

[html]  view plain  copy

 

1. <div class="sector">扇形</div>  

原理：左上角是圆角，其余三个角都是直角：左上角的值为宽和高一样的值，其他三个角的值不变（等于0）。

 

 

[css]  view plain  copy

 

1. .sector {  
2.     border-radius: 100px 0 0;  
3. }  

 

弧形：

 

 

 

[html]  view plain  copy

 

1. <div class="arc">弧形</div>  

原理：两个对角变，另外两个对角不变：比如，左上角、右下角取值为宽和高一样的值，右上角、左下角的值不变（等于0） .添加transform属性可旋转成平躺的弧形，类似人的嘴巴形状，(*^__^*) 嘻嘻……

 

[css]  view plain  copy

 

1. .arc{  
2.         border-radius: 100px 0;  
3.         -webkit-transform: rotate(45deg);  
4.         -ms-transform: rotate(45deg);  
5.         -o-transform: rotate(45deg);  
6.         transform: rotate(45deg);  
7.     }  

 

 

 

小三角：

 

[html]  view plain  copy

 

1. <div class="triangle"></div>  
2. <div class="arrow"></div>  

原理：设置边框，并把原来div的宽和高的值设置为0，即把原来的矩形压缩成只有边框，但因为设置的边框值比较大（为了保证三角形看起来不会太小或者太细），然后设置每一个边框的颜色不同，就可以看出三角形其实就可以是由边框变换而来的。若只想显示某一块三角形，可以把其他的边框颜色设置为透明，即transparent。

 

 

 

 

[css]  view plain  copy

 

1. .triangle{  
2.         border: 50px solid green;  
3.         width: 0;  
4.         height: 0;  
5.         border-top-color: yellow;  
6.         border-right-color: blue;  
7.         border-bottom-color: pink;  
8.         border-left-color: orange;  
9.     }  
10.     .arrow{  
11.         background: none;   /*为了清除前面div设置的背景颜色*/  
12.         border: 50px solid red;  
13.         width: 0;  
14.         height: 0;  
15.         border-color: red transparent transparent transparent;  
16.     }  

疑问框：

 

 

[html]  view plain  copy

 

1. <div class="rectangle">疑问框</div>  

原理：由圆角矩形和一个小三角组成：可结合伪元素、定位实现。

 

 

 

 

[css]  view plain  copy

 

1. /*圆角矩形*/  
2.     .rectangle{  
3.         width: 200px;  
4.         border-radius: 15px;  
5.         position: relative;  
6.     }  
7.     /*小三角*/  
8.     .rectangle::before{  
9.         content: "";  
10.         width: 0;  
11.         height: 0;  
12.         border: 15px solid red;  
13.         border-color: red transparent transparent transparent;  
14.         position:absolute;  
15.         bottom: -30px;  
16.         left: 40px;  
17.     }  
18.