Blog

HOME > Web > css > 【CSS】CSSだけで四角形の隅に三角マークを追加する方法

【CSS】CSSだけで四角形の隅に三角マークを追加する方法

2018/01/10

css

備忘録です。

参考サイト
CSSだけで四角形の隅に三角マークを追加する方法

参考サイトでは、いくつかの方法が記載されていますが、CSSのみが一番シンプルで簡単です。

左下に三角

.triangle1 {
  width: 200px;
  height: 200px;
  background: #ccc;
  background-image: linear-gradient(45deg, #f00 10px, transparent 0);
}

四隅に三角

.triangle4 {
  width: 200px;
  height: 200px;
  background: #ccc;
  background-image: linear-gradient(45deg, #f00 10px, transparent 0),
                    linear-gradient(-45deg, #f00 10px, transparent 0),
                    linear-gradient(135deg, #f00 10px, transparent 0),
                    linear-gradient(-135deg, #f00 10px, transparent 0);
}

カテゴリー

月間アーカイブ

«前の記事

一覧に戻る

次の記事»

最近の投稿

人気の記事

MORE

ミュージシャンズ・プラザ

神社仏閣ホームーページ制作

ホームページ制作問合せ