每日练习:用css画图形,菱形,四种三角形,实心圆,空心圆
用css画菱形
代码:
<html>
<body>
<style>
.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;
}
</style>
<div class="div1"></div>
<div class="div2"></div>
</body>
</html>
用css画四种三角形:
代码:
<html>
<body>
<style>
.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;
}
</style>
<div class="div1"></div>
<div style="margin: 40px;"></div>
<div class="div2"></div>
<div style="margin: 40px;"></div>
<div class="div3"></div>
<div style="margin: 40px;"></div>
<div class="div4"></div>
</body>
</html>效果图:
用css画实心圆空心圆:
代码:
<html>
<body>
<style>
.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;
}
</style>
<div class="circle"></div>
<div style="margin-top: 40px;"></div>
<div class="circle1"></div>
<div style="margin-top: 40px;"></div>
<div class="circle1"></div>
</body>
</html>效果图:
相关推荐
猫沙盆 2020-07-07
葉無聞 2020-06-09
buttonChan 2020-04-10
sdbxpjzq 2019-12-03
沈宫新 2020-02-23
sdbxpjzq 2019-11-04
sdbxpjzq 2019-10-26
zengni 2019-10-21
libowen0 2014-07-08
猫沙盆 2017-05-04
zhouguizhi 2018-02-14
ZiXuanFY 2007-04-12
淡风wisdon大大 2019-08-01
我就是停不下来 2019-07-01
jiedinghui 2019-07-01
wangnantjobj 2019-07-01
yongquanx 2019-07-01
lanzhusiyu 2019-06-29