Question

我试图在CSS样式箭头中显示几个单词。我已经想出如何使用CSS创建一个工作正常的箭头。但是，当我将箭头放在<h2>内时，不会显示完整的箭头。

源代码如下

HTML 的

<div style="background-color: yellow;">
    <h2><span style="background: green;">This is what I want</span><span class="arrow-right"></span><span style="margin-left: 50px;">is this what you want?</span></h2>
</div>

风格

<style>
    .arrow-right::after{
        content: "";
        width: 0; 
        height: 0; 
        border-top: 15px solid transparent;
        border-bottom: 15px solid transparent;  
        border-left: 15px solid green;
    }
</style>

输出如下

箭头指针未完全显示。我错误地使用了这些元素吗？我需要div / h2高度以后更大，但至少现在不是我关心的，因为箭头本身并没有按照需要显示。

修改： 抱歉我的画错了。下面的示例是我想要的，但当然箭头会更好，我只是使用油漆来快速绘制。

Answer 1

这是你要找的吗？

http://jsfiddle.net/61tc5em9/2/

<强> HTML

<div id="container">
    <div id="arrow">text text text</div>
    <div id="content">text text text text</div>
</div>

<强> CSS

#container {
    height: 75px;
    background-color: black;
    position: relative;
    white-space: nowrap;
    }

#arrow {
    width: 30%;
    background-color: red;
    text-align: center;
    font-size: 1.5em;
    line-height: 75px;
}

#arrow::after {
    content: "";
    border-top: 37px solid transparent;
    border-bottom: 38px solid transparent;  
    border-left: 50px solid red;
    position: absolute;
    left: 30%;
}

#content {
    color: yellow;
    font-size: 1.5em;
    position: absolute;
    left: 50%;
    top: 25px;
}

希望这会有所帮助。如果您需要任何更改，请告诉我。

Answer 2

箭头需要font-size:0;。

.arrow-right::after {
    content: "";
    width: 0;
    height: 0;
    border-top: 30px solid transparent;
    border-bottom: 30px solid transparent;
    border-left: 30px solid green;
    
    font-size: 0;
    position: relative;
    top: -8px;
}

span{
display: inline-block;
}

<div style="background-color: yellow;">
<h2><span style="background: green;">This is what I want</span><span class="arrow-right"></span><span style="margin-left: 50px;">is this what you want?</span></h2>
</div>

Answer 3

有关改进代码并使其更具动态性的建议：

在:after元素本身中使用statement（这样您就可以避免 html中的额外代码，您可以相对于元素定位箭头。
使用left: 100%将其对齐（因此它始终位于无论箭头的宽度如何，都是正确的。
使用top: 50%和margin-top: -(height/2)px垂直居中。

就像这样：

＆＃13;

.wrapper {
    padding: 2px 0;
    background: yellow;
}
.statement {
    position: relative;
    background: green;
}
.statement:after {
    content:"";
    border-top: 15px solid transparent;     /*change the border width to set the desired hieght of the arrow*/
    border-bottom: 15px solid transparent;
    border-left: 15px solid green;          /*change the border width to set the desired width of the arrow*/
    position: absolute;
    left: 100%; 
    top: 50%;
    margin-top: -15px;   /*the element has height= 30px  (border-top + border-bottom) to center it -height /2 */
}
h2{
    margin: 0;
}

＆＃13;

<div class="wrapper">
     <h2>
         <span class="statement">This is what I want</span>
         <span style="margin-left: 50px;">is this what you want?</span>
    </h2>

</div>

＆＃13;

请注意，这样你就有了更多的语义代码，因为你的html中没有虚拟元素，如果你想要更多的语句，它会自动将箭头放在后面：

＆＃13;

.wrapper {
    padding: 2px 0;
    background: yellow;
    margin-bottom: 10px;
}
.statement {
    position: relative;
    background: green;
}
.statement:after {
    content:"";
    border-top: 15px solid transparent;
    border-bottom: 15px solid transparent;
    border-left: 15px solid green;
    position: absolute;
    left: 100%; 
    top: 50%;
    margin-top: -15px;   /*the element has height= 30px  (border-top + border-bottom) to center it -height /2 */
}
h2{
    margin: 0;
}

＆＃13;

<div class="wrapper">
     <h2>
         <span class="statement">One statement</span>
         <span style="margin-left: 50px;">Good</span>
         <span class="statement">Two statement</span>
         <span style="margin-left: 50px;">Great</span>
    </h2>

</div>
<div class="wrapper">
     <h2>
         <span class="statement">Where is the arrow?</span>
         <span style="margin-left: 50px;">Do not worry about it</span>
    </h2>

</div>

＆＃13;

CSS箭头。仅显示箭头的一部分

3 个答案: