与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三角边境只有

回答

相关问题