CSS 魔法系列:纯 CSS 绘制基本图形(圆、椭圆等)

  我们的网页因为 CSS 而呈现千变万化的风格。这一看似简单的样式语言在使用中非常灵活,只要你发挥创意就能实现很多比人想象不到的效果。特别是随着 CSS3 的广泛使用,更多新奇的 CSS 作品涌现出来。《CSS 魔法系列》继续给大家带来 CSS 在网页中以及图形绘制中的使用。这篇文章给大家带来的是纯 CSS 绘制基本图形(圆、椭圆等)。

您可能感兴趣的相关文章

 

Square

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

  

Rectangle

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

  

Circle

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

/* Cleaner, but slightly less support: use "50%" as value */

  

Oval

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

/* Cleaner, but slightly less support: use "50%" as value */

  

Trapezoid

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

  

Parallelogram

 
 
#parallelogram {
	width: 150px;
	height: 100px;
	-webkit-transform: skew(20deg);
	   -moz-transform: skew(20deg);
	     -o-transform: skew(20deg);
	background: red;
}

  

您可能感兴趣的相关文章

 

本文链接:CSS 魔法系列:CSS 绘制基本图形(圆、椭圆等)

编译来源:梦想天空 ◆ 关注前端开发技术 ◆ 分享网页设计资源

posted @ 2013-11-02 10:21 梦想天空(山边小溪) 阅读(...) 评论(...) 编辑 收藏