2017-11-22 14 views
-5

このコンポーネントを設計する場合。右下に直角三角形のボタン用CSS

enter image description here

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

を作成するために、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>

+2

この質問は、背景色/構造/画像などの考慮すべきスコープでさえ、何の努力も示していません。 – GolezTrol

+2

'誰かが上記のコンポーネントを作成するためにCSSを提供できますか?これはコード作成サイトではありません。あなたはこれを達成しようとしているものを少なくとも表示する必要があります –

+0

シンプルなGoogle検索とあなたはそれを得る –

答えて

3

色を変更、高さと幅。

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>

0

あなたは

コンテンツを使用することができます。 '';ボックスサイズ: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>

ありがとうございます。

+0

このように見えますが、ベストプラクティスとは何でしょうか?CSS3でこれを書く方が良いでしょうか?また、私は黒の色を表示したくない、どうすれば透明にすることができますか? – user804401