CSS를 사용하여 삼각형을 만드는 방법

Question

CSS를 사용하여 아래 다이어그램을 만드는 방법을 도와주세요.

________/\_______ 
    |    | 
    |    | 
    |    | 
    |________________| 

이 css.and를 사용하여 수행됩니다 만 사업부 사용을 어떻게해야 저를 도와주세요.

Answer 1

여기 참조하십시오 : http://jsfiddle.net/alexwcoleman/6ue8vvba/

.box { 
    position: relative; 
    border: 1px solid #000; 
    height:100px; 
    width:300px; 
    margin-top:100px; 
    background:#fff; 
} 
.box:after, .box:before { 
    bottom: 100%; 
    left: 50%; 
    border: solid transparent; 
    content: " "; 
    height: 0; 
    width: 0; 
    position: absolute; 
    pointer-events: none; 
} 

.box:after { 
    border-color: rgba(136, 183, 213, 0); 
    border-bottom-color: #fff; 
    border-width: 30px; 
    margin-left: -30px; 
} 
.box:before { 
    border-color: rgba(194, 225, 245, 0); 
    border-bottom-color: #000; 
    border-width: 31px; 
    margin-left: -31px; 
} 

Answer 2

만들 삼각형이 코드를 사용 : 여기

HTML: 
<div id="talkbubble"></div> 

CSS: 
#talkbubble { 
    width: 120px; 
    height: 80px; 
    background: red; 
    position: relative; 
    margin-top: 50px; 
} 
#talkbubble:before { 
    content: ""; 
position: absolute; 
right: 43%; 
bottom: 100%; 
width: 0; 
height: 0; 
border-left: 13px solid transparent; 
border-bottom: 25px solid red; 
border-right: 11px solid transparent; 
} 

SEE 데모 : DEMO