webサイト作成にあたり画像のようなカテゴリのリボンの作成をしていますが、リボン右側の三角形に欠けている部分を透明にしたいのですが表現できません。
以下のソースコードをどのようにすれば透明にすることができるのでしょうか?
教えていただけると幸いです。
html
1<div class="category"> 2 カテゴリ 3</div>
scss
1.category { 2 display: inline-block; 3 position: absolute; 4 top: 5px; 5 left: -10px; 6 width: 70px; 7 height: 22px; 8 line-height: 22px; 9 text-align: center; 10 background: black;/*背景色*/ 11 color: white;/*文字色*/ 12 box-sizing: border-box; 13 14 &::after { 15 position: absolute; 16 content: ''; 17 width: 0px; 18 height: 0px; 19 z-index: 1; 20 21 /*右端の山形*/ 22 top: 0; 23 right: 0; 24 border-width: 11px 5.5px 11px 0px; 25 border-color: transparent #fff transparent transparent; 26 border-style: solid; 27 } 28}

回答1件
あなたの回答
tips
プレビュー
下記のような回答は推奨されていません。
このような回答には修正を依頼しましょう。
また依頼した内容が修正された場合は、修正依頼を取り消すようにしましょう。
2022/09/17 04:33