CSS实现圆形、三角形、梯形、自适应正方形

CSS实现三角形和梯形主要是依靠border是梯形的特性来做的，有点像相框的那种感觉。

CSS实现三角形：

<div id="test1"></div>

<style>
    #test1{
        width: 50px;
        height: 50px;
        background: purple;
        border-top: 50px solid red;
        border-bottom: 50px solid green;
        border-left: 50px solid blue;
        border-right: 50px solid yellow;
        margin:0 auto;
    }
</style>