CSS魔法系列：純CSS繪製基本圖形（圓、橢圓等）

秋天風景發表於2013-11-02
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 繪製基本圖形（圓、橢圓等）

編譯來源：夢想天空 ◆ 關注前端開發技術 ◆ 分享網頁設計資源

作者：山邊小溪

主站：yyyweb.com 記住啦：）

歡迎任何形式的轉載，但請務必註明出處。


相關文章