2

我正在尝试通过添加文本元素 ◥ 使标题的背景颜色看起来像一个矩形气泡。您可以在下面看到背景形状的跨区文本和 ◥ 的样式。但这会在边框底部和 ◥ 之间创建一个空白区域，我希望两者对齐以便看起来像一个对话气泡。

行动失败的形象。 http://i.imgur.com/1T09F.png

{block:Link}      
    <h1><span class="Headers"><a href="{URL}" {Target}>{Name} ☞&lt;/a></span>
        <div class="triangle">◥&lt;/div>
    </h1>
{block:Description}{Description}{/block:Description}    
{/block:Link}


.triangle{
    margin-left: 10px;
    font-size: 35px;
    color: #123033;
}
span.Headers{
    display: block;
    background-color: #123033;
    padding: 8px
}

我尝试了添加字体大小为 0 的父组的技巧，但没有奏效。也没有将页眉的边距设置为 0。将 ◥ div 放在同一行也没有做任何事情。我花了大约一个小时查看其他问题，看看我能做什么，但我找不到解决方案，但如果我错过了一些明显的事情，我很抱歉。

4

2 回答 2

1

使用文本来创建效果是不可靠的。不同的设备会以不同的方式呈现它，这不是你想要的。

在您的情况下，最好使用相同颜色的图像，将其放在<div/>标题下方，确保它们相互接触。然后，在左侧添加一些填充，就像您对.triangle样式所做的那样。

我创建了一个图像供您使用：在此处获取

总而言之，您的标记将如下所示：

HTML：

{block:Link}   
    <div class="header">
        <h1><a href="{URL}" {Target}>{Name} ☞&lt;/a></h1>
        <div class="triangle"></div>
    </div>  
{block:Description}{Description}{/block:Description}    
{/block:Link}

CSS：

div.header > h1 {
    background-color: #123033;
    padding: 8px
}

div.header > div.triangle {
    background: url('Arrow.png') top left no-repeat;
    height: 50px;
    padding-left: 10px
}

如果这对你有用，请告诉我。

于 2012-09-10T11:09:06.093 回答
1

如果您能够使用生成的内容（我想这取决于您网站的用户），那么我建议（出于演示目的，使用稍微修改的 HTML）：

<h1><span class="Headers"><a href="#something">a name</a></span></h1>​

下面的 CSS：

h1 {
    display: block;
    position: relative;
    background-color: #ffa;
    padding: 0.5em;
}

h1::after {
    content: '';
    border: 1em solid #ffa;
    position: absolute;
    top: 100%;
    left: 2em;
    border-bottom-color: transparent;
    border-left-color: transparent;
}

JS 小提琴演示。

在兼容性方面，caniuse建议从版本 8 开始，IE 支持生成的内容。

参考：

于 2012-09-10T12:05:55.713 回答