CSS-形状样式

 

初始代码如下：

    /*形状设置*/
    content: "";
	border-width: 10px;
	border-style: solid;
	border-color: red;/*利用三边透明*/

初始得到的是方形，下面给出了各种变化：

 

1.圆形:
  

  border-radius: 50%;//当值小于50%时，会是一个带圆边的方块

2.椭圆：

border-widht: 30px 15px; //只要长宽不同就可以达到椭圆的效果
border-radius: 50%;

3.三角形:

border-color: transparent transparent transparent red;//利用透明色实现，颜色位置不同决定朝向不同，当然也可以死用transform样式修改方向。

4.扇形：

//原理和三角形相同，只是多了圆角而已
border-radius: 50%;
border-color: transparent transparent transparent red;