CSS画图形总结

三角形：

#shape {

width:0;

height:0;

border-left: 50px solid black;

border-right: 70px solid black;

border-top: 50px solid red;

border-bottom: 100px solid red;

}

这里width，height设为0，则元素理解为一个小圆点

#triangle {

width:0;

height:0;

border-left: 50px solid transparent;//黑色变为透明

border-right: 70px solid transparent;

border-bottom: 100px solid red;

}

梯形：

首先看这段代码的效果

#shape {

width:100px;

height:0;

border-left: 50px solid black;

border-right: 50px solid black;

border-top: 100px solid red;

border-bottom: 100px solid red;

}

height为0，width不为0，元素理解为一条线。

梯形：

#trapezoid {

width:100px;

height:0;

border-left: 50px solid transparent;

border-right: 50px solid transparent;

border-bottom: 100px solid red;

}

平行四边形：

#parallelogram { 

width: 150px; 

height: 100px; 

margin-left:20px; 

-webkit-transform: skew(20deg); //倾斜20deg

background: red; 

} 

椭圆形：

#oval { 

width: 200px; 

height: 100px; 

background: red; 

border-radius: 100px / 50px; //用“/”隔开表示水平半径100px,垂直半径50px

} 

圆形：

#circle{

width:100px;

height:100px;

border-radius:50px;

background:red;

}

3/4圆：

#shape{

width:0;

height:0;

border-radius:50px;

border-top:50px solid red;

border-left:50px solid yellow;

border-right:50px solid black;

border-bottom:50px solid blue;

}

把缺的那块颜色设置为透明即为3/4圆

圆环：

#ring{

width:100px;

height:100px;

border-radius:70px;

border:20px solid black;

background: transparent;

}

六角星：

#six {

width: 0;

height: 0;

border-left: 50px solid transparent;

border-right: 50px solid transparent;

border-bottom: 100px solid red;

position: relative;

}

#six:after {

width: 0;

height: 0;

border-left: 50px solid transparent;

border-right: 50px solid transparent;

border-top: 100px solid black;

position: absolute;

content: "";

//top: 30px;

//left: -50px;

}

把伪元素after下移30px，左移50px，颜色换为红色，则可得到红色的六角星

五角星：

#five-stars {

margin-left:100px;

width: 0;

height: 0;

border-left: 50px solid transparent;

border-right: 50px solid transparent;

border-bottom: 150px solid red;

position: relative;

} //红色等腰三角形

#five-stars:before{

position: absolute;

width: 0;

height:0;

border-left: 50px solid transparent;

border-right:50px solid transparent;

border-bottom: 50px solid blue;

content: "";

top: 100px;

left: -50px;

}//蓝色等腰三角形

#five-stars:after{

position: absolute;

width: 0;

height:0;

border-left: 80px solid transparent;

border-right:80px solid transparent;

border-top: 50px solid black;

content: "";

top: 50px;

left: -80px;

}//黑色倒置三角形

将蓝色换成白色，黑色换成红色，即为红色五角星

爱心：

#heart {

position: relative;

width: 100px;

height: 90px;

}

#heart:before

{

position: absolute;

content: "";

left: 50px;

top: 0;

width: 50px;

height: 80px;

background: red;

border-radius: 25px 25px 0 0;

transform: rotate(-45deg);

transform-origin: 0 100%;

}

#heart:after {

position: absolute;

content: "";

left: 0;

top: 0;

width: 50px;

height: 80px;

background: black;

border-radius: 25px 25px 0 0;

transform: rotate(45deg);

transform-origin :100% 100%;

}

利用伪元素画两个如下所示的图形，然后黑色的以右下角为圆心，顺时针转45度；红色以左下角为圆心，逆时针转45度。合成一个爱心。