纯css制作各种图形


Square (正方形)

alt

#square{
	width: 100px;
	height: 100px;
	background-color: red;
}

Rectangle (矩形)

alt

#rectangle{
	width: 200px;
	height: 100px;
	background-color: red;
}

Circle (圆形)

alt

#circle{
	width: 100px;
	height: 100px;
	background-color: red;
	-moz-border-radius:50%;
	-webkit-border-radius:50%;
	border-radius: 50%;
}

Oval (椭圆)

alt

#oval{
	width: 200px;
	height: 100px;
	background-color: red;
	-moz-border-radius:50%;
	-webkit-border-radius:50%;
	border-radius:50%;
}

圆角大于等于50%就可以,其实这是W3C对于**重合曲线**有这样的规范:如果两个相邻角的半径和超过了对应的盒子的边的长度,那么浏览器要重新计算保证它们不会重合


Triangle Up (向上的三角形)

alt

#triangle-up{
	width: 0;
	height: 0;
	border-bottom: 100px solid red;
	border-left: 50px solid transparent;
	border-right: 50px solid transparent;
}

边框的四个角会被该角相邻的连个边框线平分
alt


Triangle Down (向下的三角形)

alt

#triangle-down{
	width: 0;
	height: 0;
	border-left: 50px solid transparent;
	border-right: 50px solid transparent;
	border-top: 100px solid red;
}

Triangle Left (向左的三角形)

alt

#triangle-down{
	width: 0;
	height: 0;
	border-right: 50px solid transparent;
	border-right: 50px solid transparent;
	border-top: 100px solid red;
}

Triangle Right (向右的三角形)

alt

#triangle-down{
	width: 0;
	height: 0;
	border-left: 50px solid transparent;
	border-bottom: 50px solid transparent;
	border-top: 100px solid red;
}