角丸の三角形をcssで作りたい

四角の要素の右下にピッタリ合わせて三角形を作りました。

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件

ベストアンサー

こんな感じではどうでしょうか

css
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    overflow:hidden;
10}
11.triangle {
12    position: absolute;
13    right: 0;
14    bottom: 0;
15    width: 0;
16    height: 0;
17    border-style: solid;
18    border-width: 0 0 60px 60px;
19    border-color: transparent transparent #3F51B5 transparent;
20}