四角形のスミに三角形を置くワンポイントCSS

こんな感じで、カードの隅に三角形のあしらいを付けるCSSを紹介します。

三角形をつけたいdivなどの箱に対して
background-imageのliner-gradientを設定してあげるだけでOKです。

.triangle {
width: 400px;
height: 250px;
background: #e6e6e6;
background-image: linear-gradient(
135deg
, #028d22 30px, transparent 0);
}

135degの部分を変えるだけで、三角形の位置を変える事が可能です。
afterやbeforeを使わないので他の装飾と喧嘩しにくいのもポイントです◎

是非試してみてください！

正しい効果測定は、正しい計測設定から！Googleアナリティクス設定項目チェックシート（無料）

Googleアナリティクスは、適切な初期設定を行って初めて、解析に役立つデータを計測できます。 正しい効果測定を行う上で、必要な設定項目のチェックシートをご用意しました。