與CSS三角邊境只有

我想創建像下面只使用CSS標題的背景：與CSS三角邊境只有

enter image description here

我能夠形成三角形，但無法正確定位。的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演示。 http://jsfiddle.net/yGsny/

來源

2013-02-14 user1251698

像下面???? 。 – Sowmya 2013-02-14 11:41:55

@Sowmya對不起，添加了圖像。 – user1251698 2013-02-14 11:48:42

你沒有關閉你的h1標籤。 – 2013-02-14 12:03:29

看看這有助於 http://nicolasgallagher.com/pure-css-speech-bubbles/demo/ 氣泡下面的三角形。

此外，網站上還有很多有用的文章可能有所幫助。

來源

2013-02-14 11:42:53 Aditi

嘗試使用填充+負文本縮進，這應該爲你工作:)

來源

2013-02-14 11:43:19 pwolaq

這是你的問題的一種可能的解決方案：

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

來源

2013-02-14 12:01:34

與CSS三角邊境只有

回答

相關問題