css特殊图形
制作三角形使用的是border属性,内容区宽高值为0
span{
display:inline-block;
width:0px;
height:0px;
border-top:50px solid red;
border-left:50px solid blue;
border-right:50px solid orange;
border-bottom:50px solid green;
}
制作梯形(和三角形不同的是添加了宽度)
div{
border-bottom:80px solid red;
border-left:50px solid transparent;
border-right:50px solid transparent;
height:0;
width:100px;
}
叶子图形
div{width: 100px;height: 100px;background: deepskyblue;
border-bottom-left-radius: 50%;
border-top-right-radius: 50% }
制作三角形使用的是border属性,内容区宽高值为0
span{
display:inline-block;
width:0px;
height:0px;
border-top:50px solid red;
border-left:50px solid blue;
border-right:50px solid orange;
border-bottom:50px solid green;
}
制作梯形(和三角形不同的是添加了宽度)
div{
border-bottom:80px solid red;
border-left:50px solid transparent;
border-right:50px solid transparent;
height:0;
width:100px;
}
叶子图形
div{width: 100px;height: 100px;background: deepskyblue;
border-bottom-left-radius: 50%;
border-top-right-radius: 50% }