삼각형 테두리에만

Question

내가 좋아하는 유일한 CSS를 사용하여 아래 제목의 배경을 만들려면 :

내가 올바르게 위치로 삼각형을 만들 수 있지만, 드릴 수 없습니다.

h1{ 
    margin: 20px; 
    width: 0px; 
    height: 0px; 
    border-style: solid; 
    border-width: 50px 0 0 50px; 
    border-color: transparent transparent transparent #0000ff; 
} 

JSFiddle 데모 :

<h1><a href="#">Link ...</a></h1> 

가 여기에 CSS의 :로 html로 간단합니다. 이 거품 아래 http://nicolasgallagher.com/pure-css-speech-bubbles/demo/ 삼각형을 도움이된다면 http://jsfiddle.net/yGsny/

Answer 1

을 참조하십시오.

또한 도움이 될만한 사이트에는 더 유용한 기사가 많이 있습니다.

Answer 2

패딩 + 음성 텍스트 들여 쓰기를 사용하려고이 당신을 위해 작동합니다 :) 여기

Answer 3

이 문제에서 하나 개의 가능한 솔루션입니다 : 다음과 같은

h1{ 
     background:blue; 
     line-height:30px; 
     padding:0 20px; 
     width:50px; 
     position:relative; 
    } 
    a{color:white; text-decoration:none;} 
    h1:before{ 
     position:absolute; 
     left:100%; 
     top:0; 
     content:""; 
     border:30px solid blue; 
     border-width:0px 30px 30px 0px; 
     border-color:transparent transparent blue transparent; 
    } 

Fiddle