在CSS中的另一个元素下添加一个三角形

用户名

我一直在努力尝试但没有成功，在我的正方形下添加一个小三角形来充当这样的指针：

我的意思的例子

我的代码本身可以正常工作，但是每当我尝试添加css来使这个三角形都不会出现时。我认为它与前后函数有关，但是我并没有真正理解它。有人可以帮我吗？

<div id="slider_outer1">
<div class="slider_segment"><img src="myurl.com" alt="Nature" style="width:100%;"></div>
<div id="slider_marker1"></div>
</div>
<style>    
    .container {width:400px;}
    
    #slider_outer1 {width: 98%;border: 5px solid #8f89ff; position: relative;display: inline-block; border-radius: 5px;}
    
    .slider_segment {width: 100%; float: left; display: inline;}
    
#slider_marker1 {
    position: absolute;
    border: 2px solid #574fff;
    height: 30px;
    width: 5%;
    top: 120px;
    left: 57.25%;
    text-align: center;
    Margin-left: -10%;
    padding: 5px 0px;
    background: #ffffff;
    border-radius: 5px;
}
    
div#slider_marker1:after {
    content: "5";
    font-size: 20px;
    padding: 5px;
    line-height: 30px;
    font-family: sans-serif;
}
        
</style>

编辑：三角形的代码

<div class="triangle-down"></div>
<style>
.triangle-down {
	width: 0;
	height: 0;
	border-left: 15px solid transparent;
	border-right: 15px solid transparent;
	border-top: 20px solid #555;
}
</style>

MARyan87

通常在CSS中，三角形是使用边框制作的，而不是在伪元素之前和之后。要创建一个指向下方的三角形，您将创建一个n像素数为顶的边框，并创建宽度为一半且透明的左右边框。

例：

    <div id="slider_outer1">
<div class="slider_segment"><img src="myurl.png" alt="Nature" style="width:100%;"></div>
<div id="slider_marker1"><div id='triangle-down'></div></div>


</div>
<style>    
    .container {width:400px;}

    #slider_outer1 {width: 98%;border: 5px solid #8f89ff; position: relative;display: inline-block; border-radius: 5px;}

    .slider_segment {width: 100%; float: left; display: inline;}

#slider_marker1 {
    position: absolute;
    border: 2px solid #574fff;
    height: 30px;
    width: 5%;
    top: 120px;
    left: 57.25%;
    text-align: center;
    Margin-left: -10%;
    padding: 5px 0px;
    background: #ffffff;
    border-radius: 5px;
}

#triangle-down {
    position: absolute;
    top: 40px;
    right: 50%;
    transform: translateX(50%);
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 20px solid blue;
}

div#slider_marker1:after {
    content: "5";
    font-size: 20px;
    padding: 5px;
    line-height: 30px;
    font-family: sans-serif;
}

</style>

在这里查看我的Codepen：https ://codepen.io/anon/pen/bvXOab

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。