纯 CSS 绘制基本图形(圆、椭圆等)

时间: 2013-12-5 分类: CSS 作者: SAI

TAGS:

我们的网页因为 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;
}
Javin

本文作者: SAI

推崇以用户为中心的设计理念,专注于用户体验设计,游走在视觉设计与前端开发之间。我要投稿

除非特殊注明,本文版权归原作者所有,欢迎转载!转载请注明版权以及本文地址,谢谢。
转载保留版权:塞纳» 前端技术 » CSS » 纯 CSS 绘制基本图形(圆、椭圆等)
本文地址:http://www.saiody.com/?p=917

返回顶部