只有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演示。 http://jsfiddle.net/yGsny/

Answer 1

以下是您问题的一种可能解决方案：

  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

Answer 2

看看这是否有帮助 http://nicolasgallagher.com/pure-css-speech-bubbles/demo/ 气泡下方的三角形。

此外，网站上还有更多有用的文章可能有所帮助。

Answer 3

尝试使用padding + negative text-indent，这应该适合你：）