0

我想只使用 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/

4

3 回答 3

2

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

  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;
    }

小提琴

于 2013-02-14T12:01:34.823 回答
1

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

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

于 2013-02-14T11:42:53.337 回答
0

尝试使用填充+负文本缩进，这应该适合你:)

于 2013-02-14T11:43:19.783 回答