CSS マジック シリーズ: Pure CSS_html/css_WEB-ITnose を使用した三角形 (さまざまな角度) の描画

私たちのウェブページは CSS のおかげで常に変化するスタイルを表現しています。この一見シンプルなスタイル言語は、非常に柔軟に使用でき、創造力を発揮すれば、想像を絶するような効果を実現できます。特に CSS3 の普及により、より斬新な CSS 作品が登場しています。

今日からこの記事では、Webページやグラフィック描画におけるCSSの使い方をお届けする「CSSいろいろシリーズ」をスタートします。まずは人気のCSS三角形の描画方法を紹介します。

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

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

トライアングルアップ

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

トライアングルダウン

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

三角左

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

三角右

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

三角左上

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

三角形右上

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

三角形左下

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

三角右下

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

興味があるかもしれない関連記事

Web デザインにおける CSS3 の素晴らしいアプリケーション 20 個 推奨される 12 個の美しい CSS3 ボタン実装ソリューション 推奨される 10 個の優れたソリューション CSS3 開発ツールは、50 個の美しい CSS3 の最高のアプリケーション例を共有します 24 非常に実践CSS3ツール究極コレクション

この記事へのリンク: Variety CSS シリーズ: Pure CSS 描画三角形 (さまざまな方向)

コンパイル元: Dream Sky ◆ フロントエンド開発技術に焦点を当てる ◆ Web デザイン リソースを共有する