CSS ストライプの三角

CSS で、ストライプの三角を作成できますか ?

No.2 回答者： fujillin 回答日時： 2022/05/05 23:17

こんばんは

方法はいろいろあると思います。

borderで三角形を表示する方法もありますが、形状やサイズの計算が面倒なので、比較的自由に形状を設定でき、また、ストライプも自由に設定しやすいと思われる方法での一例を。

<div id="hoge"></div>
に対して、

#hoge {
height: 200px; width: 200px;
background: repeating-linear-gradient(
30deg, red, red 5px,
blue 5px, blue 10px);
clip-path: polygon(0 0, 100% 0%, 50% 86.6%);
}
とかではいかがでしょうか。

No.1 回答者： ぷらぐろまあ 回答日時： 2022/05/05 22:54

難しいですね。

自由に描くならHTML5にしたほうがいいですよ。