php绘制实心菱形,每日练习:用css画图形,菱形,四种三角形,实心圆,空心圆

用css画菱形

代码:

.div1{

width: 0;

height: 0;

border-top: 40px solid transparent;

border-left: 40px solid transparent;

border-right: 40px solid transparent;

border-bottom: 40px solid #bbbbbb;

}

.div2{

width: 0;

height: 0;

border-bottom: 40px solid transparent;

border-left: 40px solid transparent;

border-right: 40px solid transparent;

border-top: 40px solid #bbbbbb;

}

用css画四种三角形:

代码:

.div1{

width: 0;

height: 0;

border-top: 40px solid transparent;

border-left: 40px solid transparent;

border-right: 40px solid transparent;

border-bottom: 40px solid #bbbbbb;

}

.div2{

width: 0;

height: 0;

border-bottom: 40px solid transparent;

border-left: 40px solid transparent;

border-right: 40px solid transparent;

border-top: 40px solid red;

}

.div3{

width: 0;

height: 0;

border-bottom: 40px solid transparent;

border-top: 40px solid transparent;

border-right: 40px solid transparent;

border-left: 40px solid black;

}

.div4{

width: 0;

height: 0;

border-bottom: 40px solid transparent;

border-left: 40px solid transparent;

border-top: 40px solid transparent;

border-right: 40px solid burlywood;

}

效果图:

用css画实心圆空心圆:

代码:

.circle{

width: 100px;

height: 100px;

background-color: #a72525;

border-radius: 100px;

}

.circle1{

width: 100px;

height: 100px;

background-color: #ffffff;

border: 3px solid #a72525;

border-radius: 100px;

}

效果图: