треугольник граница с CSS только

Question

Я хочу, чтобы создать фон заголовка, как показано ниже, используя только CSS:

Я могу создать треугольник, но не смог расположить его правильно. HTML, просто как:

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

Вот CSS:

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

JSFiddle Demo. http://jsfiddle.net/yGsny/

Answer 1

Смотрите, если это помогает http://nicolasgallagher.com/pure-css-speech-bubbles/demo/ треугольников ниже пузырьков.

Также есть много полезных статей на сайте, которые могут помочь.

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