CSS Magic シリーズ: 純粋な CSS_html/css_WEB-ITnose を使用して基本的な形状 (円、楕円など) を描画します。

私たちのウェブページは CSS のおかげで常に変化するスタイルを表現しています。この一見シンプルなスタイル言語は、非常に柔軟に使用でき、創造力を発揮すれば、想像を絶するような効果を実現できます。特に CSS3 の普及により、より斬新な CSS 作品が登場しています。 「CSS Magic シリーズ」は、Web ページやグラフィック描画での CSS の使用を引き続きお届けします。この記事では、基本的な形状 (円、楕円など) を描画するための純粋な CSS を紹介します。

興味がありそうな関連記事

35 の素晴らしい CSS3 アニメーション効果のデモンストレーション Web Frontier: 非常に豪華な CSS3 効果のセット Web Frontier: 驚くべき CSS3 アプリケーション 厳選された 10 個のオンライン CSS3 コード生成ツール 毎年恒例のお祭り: 最もエキサイティングな CSS3 チュートリアル2012年

正方形

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

長方形

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

Circle

Tra pezoid

#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 */

Parallelogram

#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 */

この記事へのリンク: CSS Magic シリーズ: CSS で基本的な図形 (円、楕円など) を描画する

編集元: Dream Sky ◆ フロントエンド開発技術に注目する ◆ Web デザインリソースを共有する