html
1<div class="square"> 2 <div class="triangle"> 3 <span>三角</span> 4 </div> 5</div>
scss
1.square { 2 width: 180px; 3 height: 180px; 4 background: #fff; 5 position: relative; 6 border: solid 1px #ccc; 7 border-radius: 5px; 8 box-shadow: 0 5px 5px rgba(0, 0, 0, 0.1); 9 .triangle { 10 position: absolute; 11 right: 0; 12 bottom: 0; 13 width: 0; 14 height: 0; 15 border-style: solid; 16 border-width: 0 0 60px 60px; 17 border-color: transparent transparent #3F51B5 transparent; 18}
この三角形の右下を角丸にしたいと思っているのですが、.triangleにborder-radius: 0 0 5px 0; や border-bottom-right-radius: 5px;を追加して右下を丸くすると、三角形が四角形になってしまいます。
##試したこと
chromeの検証機能で調べたところ、.triangleに設定したborder-widthの二番目の要素が、triangleに設定したborder-radiusの3番目の要素より小さくなった時点で三角から四角に変わっているようです。
##実現したいこと
この三角形の右下を角丸にする方法を知りたいです。
ご教示いただけることがあれば、何卒よろしくお願いいたします。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2019/01/08 05:15
2019/01/08 05:16