css와 '삼각형 모서리'로 사각형 만들기

'삼각형 모서리'가있는 사각형 머리글이있는 CSS로 컨테이너를 만들려고합니다.css와 '삼각형 모서리'로 사각형 만들기

예 :

또는 여기에 코드 (CSS) :

.bubble { 
    clear: both; 
    margin: 0px auto; 
    width: 350px; 
    background: #fff; 
    -moz-border-radius: 10px; 
    -khtml-border-radius: 10px; 
    -webkit-border-radius: 10px; 
    -moz-box-shadow: 0px 0px 8px rgba(0,0,0,0.3); 
    -khtml-box-shadow: 0px 0px 8px rgba(0,0,0,0.3); 
    -webkit-box-shadow: 0px 0px 8px rgba(0,0,0,0.3); 
    position: relative; 
    z-index: 90; /* the stack order: displayed under ribbon rectangle (100) */ 
} 

div#container { 
    margin: 50px auto 0px auto; /* centered */ 
    padding-top:100px; 
    width: 400px; 
} 

.triangle { 
    height: 35px; 
    top: -20px; 
    width: 315px; 
    position: relative; 
    background: #D12738; 
    background: -moz-linear-gradient(top, rgba(209, 39, 56, 1) 0%, rgba(122, 23, 38, 1) 100%); 
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(209, 39, 56, 1)), color-stop(100%,rgba(122, 23, 38, 1))); 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#d12738', endColorstr='#7a1726',GradientType=0), filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000'); 
} 

.triangle::after { 
    -moz-transform: rotate(45deg); 
    -ms-transform: rotate(45deg); 
    -webkit-transform: rotate(35deg); 
    -o-transform: rotate(45deg); 
    background: none repeat scroll 0 0 white; 
    content: ""; 
    height: 44px; 
    left: 302px; 
    position: absolute; 
    top: 2px; 
    width: 24px; 
}

HTML :

<div id="container"> 
    <div class="bubble"> 
     <div class="triangle">test baa</div> 
     <p>sadsadsadsad dsdsa dsdsa ds dsadsd</p> 
     <p>sadsadsadsad dsdsa dsdsa ds dsadsd</p> 
     <p>sadsadsadsad dsdsa dsdsa ds dsadsd</p> 
     <p>sadsadsadsad dsdsa dsdsa ds dsadsd</p> 

    </div> 
</div>

그러나 때문에 흰색의 오른쪽 가장자리 사라져의 경계 배경. 이것을 막을 수있는 방법이 있습니까?

도움을 주셨습니다.

출처

2013-01-05 user1950152