Question

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

{block:Link}      
    <h1><span class="Headers"><a href="{URL}" {Target}>{Name} ☞</a></span>
        <div class="triangle">◥</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放在同一行上也没有做任何事情。我花了大约一个小时来查看其他问题，看看我能做些什么，但我找不到解决方案，但如果我错过了一些明显的东西，我会原谅我。

Answer 1

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

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

我创建了一个供您使用的图片：Grab it here

总而言之，您的标记看起来像这样：

HTML：

{block:Link}   
    <div class="header">
        <h1><a href="{URL}" {Target}>{Name} ☞</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
}

请告诉我这是否适合您。

Answer 2

如果您能够使用生成的内容（我想，这取决于您网站的用户），那么我建议（使用稍加修改的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 Fiddle demo

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

参考文献：

CSS generated content compatibility, from caniuse.com。

删除span和text元素之间的空格

2 个答案: