CSSで三角形を実装するにはaspect-ratioとclip-pathを使用するのが簡単 -CSS Triangle Shapes
HTMLはdiv要素一つだけ（もしくはimg要素一つだけ）、あとはCSSをコピペするだけで三角形を実装できるCSS Triangle Shapesを紹介します。 CSSの三角形は、一昔前はborderで実装していましたが、最近では2つのプロパティ（aspect-ratio, clip-path）で実装します。どうやって実装するんだっけ？ というときに覚えておくと、さくっと利用できるので便利です。 CSS Triangle Shapes CSSで三角形を実装する最近の方法 CSSで三角形を作成するジェネレター CSSで三角形を実装する最近の方法 まずは、三角形をCSSで実装する方法を見てましょう。 これまでのCSSだと、divなどの矩形にborderプロパティで太いボーダーを設定し、三角形の部分だけ残して使用していました。
CSS 画像を三角形にマスク抜きする方法 - by Takumi Hirashima
CSS で画像を三角形に切り抜き（マスク）する方法を紹介します。 例えば、デザインのアクセントで画像をマスクしたいときに便利な方法です。 CSSで画像を三角形に切り抜く場合は clip-path CSSで画像を三角形に切り抜く場合は clip-path CSSで画像を三角形に切り抜く場合は clip-path が便利です。 例えば、正方形の要素に背景画像を指定して、三角形に切り抜く場合は次の指定行います。 .clip-path { clip-path: polygon(50% 0%, 0% 100%, 100% 100%); } これは正方形の上下に合わせた面長な三角形になるため、正三角形の場合は次のように指定します。 .clip-path { clip-path: polygon(50% 0%, 0 85%, 100% 85%); } この場合、正方形に対して上付きで配置されているので、
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
