CSS制作的32种图形效果 梯形 | 三角 | 椭圆 | 平行四边形 | 菱形 | 四分之一圆 | 旗帜

在练习过程中，总结了一下常用的CSS实现三角形等常见规则图形，为了节省时间，下面图形都采用的一个标签，可以是块元素也可以是行内元素，不过行内元素需要加上“display:block;”，唯一不同的是，在此用了不同的类名来区别，相关类名我放在了标题的后面，以便大家对应查看。

1、正方形：

.square {
    width: 100px;
    height:100px;
    background: #E5C3B2;
}

效果图：

2、平行四边形:

.parallelogram {
    width: 100px;
    height: 70px;
    -webkit-transform: skew(20deg);
    -moz-transform: skew(20deg);
    -o-transform: skew(20deg);
    -ms-transform: skew(20deg);
    transform: skew(20deg);
    background: #E5C3B2;
}

 效果图：

3、菱形：

.diamond {
	width:80px;
	height:80px;
	margin:40px 0 0 40px;
	-webkit-transform-origin:0 100%;
	-moz-transform-origin:0 100%;
	-o-transform-origin:0 100%;
	-ms-transform-origin:0 100%;
	transform-origin:0 100%;
	-webkit-transform:rotate(-45deg);
	-moz-transform:rotate(-45deg);
	-o-transform:rotate(-45deg);
	-ms-transform:rotate(-45deg);
	transform:rotate(-45deg);
	background:#E5C3B2;
}

效果图：

4、长方形： 

.rectangle {
	width:100px;
	height:50px;
	background:#E5C3B2;
}

效果图：

5、梯形：

.trapezoid {
	height:0;
	width:100px;
	border-bottom:100px solid #e5c3b2;
	border-left:60px solid transparent;
	border-right:60px solid transparent;
}

效果图：

 

 6、三角形：

.triangle-up {
	height:0;
	width:0;
	border:50px solid #e5c3b2;
	border-color:transparent transparent #e5c3b2 transparent;
}

效果图：

 

7、半圆：

.semicircle-top {
	background:#e5c3b2;
	height:25px;
	width:50px;
	-moz-border-radius:50px 50px 0 0;
	-webkit-border-radius:50px 50px 0 0;
	border-radius:50px 50px 0 0;
}

 效果图：

8、椭圆

.ovalHor {
	background:#e5c3b2;
	height:40px;
	width:80px;
	-moz-border-radius:40px/20px;
	-webkit-border-radius:40px/20px;
	border-radius:40px/20px;
}

 效果图：

9、旗帜：

.ribbon {
	width:0;
	height:100px;
	border-left:50px solid red;
	border-right:50px solid red;
	border-bottom:35px solid transparent
}

 效果图：

上面就用CSS制作的图形效果，当然大家还可以发挥你的想像和创造，制作一些更精美的图形。

今天的分享就这么多，有问题的话请打在评论区，拜拜咯~~