纯CSS绘制圆形、椭圆形、菱形、三角形

纯CSS绘制圆形、椭圆形、菱形、三角形
1、圆形：

width: 50px;
height: 50px;
border-radius: 50%; // 50%~100%之间都行
background: pink;

2、半圆形：（以左圆形为例）

width: 50px;
height: 100px;
border-radius: 50px 0 0 50px;
background: pink;

3、四分之一圆形：（以左上圆形为例）

width: 50px;
height: 50px;
border-radius: 50px 0 0 0;
background: pink;

4、椭圆形：

width: 100px;
height: 75px;
border-radius: 50%;
background: pink;

5、半椭圆形：（以左椭圆形为例）

width: 100px;
height: 75px;
border-radius: 100% 0 0 100%/50%;
/*相当于100% 0 0 100%/50% 50% 50% 50%;*/
background: pink;
/*通常情况下，border-radius设置圆角的水平和垂直半径是一样的，
但也可以对圆角的水平和垂直半径进行单独设置，
使用以“/”来区别，“/”前面的值表示圆角的水平半径
，“/”后面的值表示圆角的垂直半径。*/
/*例如：
border-radius: 10px / 5px 15px 
相当于border-radius:  10px 10px 10px 10px / 5px 15px 5px 15px 。*/

6、四分之一椭圆形：（以左上椭圆形为例）

width: 100px;
height: 75px;
border-radius: 100% 0 0 0;
background: pink;

7、菱形：

width: 100px;
height: 50px;
background: pink;
transform: skew(-20deg);
text-align: center;
line-height: 50px;

问题：形状变形后，字体也跟着变形。
解决：让字体旋转回来。
transform: skew(20deg);

8、三角形：（以下三角为例）

利用border属性，把左、右、下边框设置为透明色或与背景色相同的颜色，推荐透明色，这样拓展性更好。

width: 0;
height: 0;
border-width: 50px;
border-style: solid;
border-color: pink transparent transparent transparent;

9、带边框的三角形：（以下三角为例）

三角形本身就是border，不可能再给border添加border属性，因此用叠加层的方法。

思路：将两个三角形叠加在一起，外层三角形是一个稍大些的div，颜色设置成边框所需的颜色；内层三角形是通过绝对定位放置在里面的一个div。

内层div的绝对定位应该根据相对定位外层div的内容边界计算，而外层div的宽高均为0，因此内层div应该根据外层div的中心点也就是外层三角形的下顶点来定位。

外层三角形：

position:relative;
width: 0;
height: 0;
border-width: 50px;
border-style: solid;
border-color: grey transparent transparent transparent;

内层三角形：

position: absolute;  
top: -49px;  
left: -48px; 
width: 0;  
height: 0;  
border-width: 48px;  
border-style: solid;  
border-color: pink transparent transparent transparent;

10、东北、东南、西北、西南三角形（以西北三角形为例）：

width: 0; 
height: 0; 
border-width: 50px 50px 0 0; 
border-style: solid; 
border-color: pink transparent transparent transparent; 

11、带气泡框的三角形（以上气泡框为例）：

(1)绘制一个带圆角的矩形，设置相对定位以便外层三角形相对其进行绝对定位。

(2)绘制外层三角形，相对矩形进行绝对定位，通过left和margin-left使其相对矩形水平居中，边框颜色设置为气泡框颜色。

(3)绘制内层三角形，相对外层三角形进行绝对定位，边框颜色设置为与矩形背景色同色。

矩形：

position:relative; 
margin-top:20px;
width:100px; 
height:50px; 
background:pink;  
padding:10px 20px;   
border-radius:5px; 
border:1px solid grey; 

外层三角形：

display:block;  
width:0;  
height:0;  
border-width:15px;  
border-style:solid;  
border-color:transparent transparent grey transparent;  
position:absolute;  
top:-30px;  
left:50%;
margin-left:-15px;

内层三角形：

display:block;  
width:0;  
height:0;  
border-width:15px;  
border-style:solid;  
border-color:transparent transparent pink transparent;    
position:absolute;  
top:-14px;  
left:-15px;