纯css画菱形,三角形,梯形,平行四边形

菱形:

	    display: inline-block;
            width:100px;
            height:100px;
            background-color: #c685d9;
            transform: rotate(45deg);
            margin:50px;


三角形:

	    width: 0;
            height:0;
            border-bottom: 100px solid #ffcccc;
            border-right:50px solid transparent;
            border-left:50px solid transparent;


梯形:

 	    margin-top:50px;
            height: 0;
            width: 120px;
            border-bottom: 120px solid #cccccc;
            border-left: 60px solid transparent;
            border-right: 60px solid transparent;


平行四边形:

	    margin-top:50px;
            margin-left:50px;
            width:160px;
            height:100px;
            background-color: beige;
            transform: skew(-30deg);


你可能感兴趣的:(前端复习,css)