右下に直角三角形のボタン用CSS

Question

このコンポーネントを設計する場合。

誰かが上記のコンポーネントの幅は、それが含まれているテキストの長さによって決定すべきである

を作成するために、CSSを私に提供することができます。

背景色の右下のカットインは、8pxの辺を持つ直角三角形でなければなりません。

私は以下のコードを試していますが、三角形のカットは表示されません。あなたの要件ごと

.container { 
 
    position: relative; 
 
    display: block; 
 
    width: 120px; 
 
    height: 24px; 
 
    background: blue; 
 
    color:white 
 
} 
 

 
.container:after{ 
 
    position: absolute; 
 
    bottom: 0; 
 
    height: 8px; 
 
    width: 8px; 
 
    border-top: 50px solid transparent; 
 
    border-left: 100px solid red; 
 
    border-bottom: 50px solid transparent; 
 
}

<div class="container"> 
 
    Informational 
 
</div>

Answer 1

色を変更、高さと幅。

div { 
 
    height: 300px; 
 
    background: red; 
 
    position: relative; 
 
} 
 

 
div:before { 
 
    content: ''; 
 
    position: absolute; 
 
    bottom: 0; right: 0; 
 
    border-bottom: 80px solid white; 
 
    border-left: 80px solid red; 
 
    width: 0; 
 
}

<div class="informational"></div>

Answer 2

あなたは

コンテンツを使用することができます。 '';ボックスサイズ：border-box;表示：インラインブロック;これを表示する。

ここでそれを確認してください

[https://jsfiddle.net/techran/bpu9zwer/] 

.container { 
 
background: #169ee9; 
 
position: relative; 
 
box-sizing:border-box; 
 
display:inline-block; 
 
padding:7px 15px; 
 
color:#fff; 
 
} 
 

 
.container:before { 
 
content: ''; 
 
position: absolute; 
 
bottom: 0; right: 0; 
 
border-bottom: 15px solid #000; 
 
border-left: 15px solid transparent; 
 
width: 0;}

<div class="container"> 
 
    Informational 
 
</div>

ありがとうございます。