[CSS]画像無しで三角形を作成する仕組みとそれを応用するチュートリアル

画像無しで三角形を作成するスタイルシートの解説と、それを使って吹き出しや折り返しを作成するチュートリアルを紹介します。 CSS Quick Tip: CSS Arrows and Shapes Without Markup デモページ（当方作成） [ad#ad-2] 下記は各ポイントを意訳したものです。 CSSで三角形を作成する仕組み CSSで作成した三角形を使って吹き出しを作成 CSSで作成した三角形をさらに応用 対応ブラウザ CSSで三角形を作成する仕組み まずは基本となる三角形の作り方です。 三つにStepを分けて、解説します。 デモページ（当方作成） CSS：Step 1 三角形の元となる四角形を作成します。 三角のサイズは「border:10px;」で決まります。高さはそのまま、幅は倍です。 height, widthは仮のものです。 .step1{ height:20px; w

[minihateemon]

“2:after { content: ' '; height: 0; position: absolute; width: 0; border: 10px solid transparent; border-top-color: #333; top: 100%; left: 50%; margin-left: -10px;}”

[unarist]

四辺のborderの境界が斜めになることを利用・・・

[goodFlat]

吹き出しをCSSで

[kool_kreate]

margin-left:-xxpxで真ん中に設定

[AfroRay]

三角の書き方

[d_animal141]

画像無しで三角形を作成する仕組みとそれを応用するチュートリアル

[yuta0121]

　吹き出し

[monoooki]

図解でやっとわかった

[koroharo]

CSSで三角形を作る。

[uca_co]

なにこれかわいい！良く考えつくなこんなん…！

[sw_lucchini]

borderで作る三角形の作り方

[teracy_junk]

この発想は無かったわ。感心

[hidehish]

見てる:

[gonta02]

画像無しで三角形を作成する仕組みとそれを応用するチュートリアル

[mkoji530]

iphone

[lanius]

CSSで三角形を描画する仕組み。

[kkeisuke]

吹き出し 紙を折り返したようなエフェクト

[nors]

http://www.yuiblog.com/blog/2010/11/22/css-quick-tip-css-arrows-and-shapes-without-markup/

[yukisachiko]

画像を使わないで、吹き出しを用いることが出来る！