前提
ストライプ柄のデザインをコーディング作成しているのですが、実装方法がわからず質問させて頂きました。
ストライプ部分を四角形で表示されているので、三角で表示したいです。
詳細は以下に画像を添付しています。
実現したいこと
・現状のストライプ柄が以下です。
・ストライプ柄を以下の赤色のような三角形で表示したいです。
codePenの環境になります。
codePen
- ▲▲機能を動作するようにする
発生している問題・エラーメッセージ
四角形の下に対してtransparentが効かない
該当のソースコード
<div class="section"></section> .section{ width: 500px; height: 500px; background: black; position: relative; } .section::after{ content: ''; position: absolute; top: 0; right: 0; border-top: 90px solid; border-image: repeating-linear-gradient(45deg, tomato 0, tomato 10px, white 10px, white 20px); border-left: 90px solid transparent; }
試したこと
border-leftにtransparentを入れてみましたが効果はありませんでした。
補足情報(FW/ツールのバージョンなど)
ここにより詳細な情報を記載してください。
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。