なぜCSSのborderで三角形ができるのか、実際にコードを書いて調べてみた | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作

こんにちは、おじいちゃんです。 Webサイトを作っていると、デザインによってはCSSを使って三角形を作るときがあります。便利ですよね。画像だとhover時に色が変えられなかったり、作ったとしてもアニメーションがつけられなかったり、かといってSVGにするほどでもない。 CSSのborderを利用することで、三角形は比較的簡単に作れますし、アニメーションもできる。それではなぜborderを利用することで三角形が表現できるのか、考えてみたことありますか？ 今回はborderを利用して、三角形を表現できるCSSの挙動について紹介したいと思います。 まずは書いてみる 黒で塗りつぶされた三角形を書いてみます。 <span>タグに任意のクラスを当てたHTMLを用意して、下記プロパティを当てることで三角形が表現できます。 <span class="triangle"></span> .triangle{

[kjtec]

“transparent”

[nayo74]

いつも混乱するので。

[gnufrfr]

なるホモ〜〜！！

[h-a-t-e-h-a-t-e-h-a-t-e-n-a]

cssで三角形を作る

[j_miyazawa]

へぇ〜

[ytmtsu0423]

CSSの応用性は異常

[nelog]

borderの境界線が斜めに

[su_zu_ki_1010]

コードを書いて挙動確認した。なるほどなるほど。

[HM_naoto]

いちいち▼作って画像書き出しのもめんどいな-って思ってた。僕も実際にコード書いてどんな感じになるか確認してみる！

[minonet]

なぜCSSのborderで三角形ができるのか、実際にコードを書いて調べてみた こんにちは、おじいちゃんです。 Webサイトを作っていると、デザインによってはCSSを使って三角形を作るときがあります。便利ですよね。画像だとhov