1.正三角形
方法A:
<style>
.box{
width: 0;
height: 0;
border-top: 50px solid transparent;
border-bottom: 50px solid red;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
}
</style>
方法B:
<style>
.box{
width: 0px;
height:0px;
border: 50px solid;
border-color: transparent transparent red transparent;
}
</style>
2.倒立三角形
<style>
.box{
width: 0;
height: 0;
border-top: 50px solid red;
border-bottom: 50px solid transparent;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
}
</style>
3.圆形
<style>
.box{
width: 50px;
height: 50px;
border-radius: 50%;
background-color: red;
}
</style>
4.上半圆
<style>
.box{
width: 50px;
height: 25px;
border-radius:50px 50px 0 0 ;
background-color: red;
}
</style>
5.左半圆
<style>
.box{
width: 25px;
height: 50px;
border-radius:50px 0 0 50px ;
background-color: red;
}
</style>
6.椭圆
<style>
.box{
width: 100px;
height:50px;
border-radius:50%;
background-color: red;
}
</style>
7.操场图形
<style>
.box{
width: 100px;
height:50px;
border-radius:50px;
background-color: red;
}
</style>
8.直角梯形
<style>
.box{
width: 50px;
height:50px;
background-color: red;
position: relative;
}
.box::after{
content: '';
position: absolute;
border-top: 0px solid transparent;
border-bottom: 50px solid red;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
}
</style>
9.等腰梯形
<style>
.box{
width: 50px;
height:50px;
border: 50px solid;
border-color: transparent transparent red transparent;
}
</style>
265
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
