오른쪽 아래 삼각형이있는 버튼 용 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>

감사합니다 여기를 확인하시기 바랍니다.