css特殊图形

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% }