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

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

改进代码并使其更动态的建议：

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

就像这样：

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

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

请注意，通过这种方式，您可以获得更多语义代码，因为您的 html 中没有虚拟元素，如果您需要更多语句，它会像这样自动将箭头放在后面：

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

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

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

CSS arrow. Only a portion of the arrow is being displayed

html

css

css-shapes