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

Question

我一直在努力，没有成功，在我的广场下面添加一个小三角形作为这样的指针：

我的代码本身有效，但每当我尝试添加css来制作这个三角形时，都不会出现任何问题。我认为它与前后功能有关，但我并没有真正得到它。任何人都可以帮助我吗？

$questions->title

编辑：三角形的代码

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

Answer 1

通常在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

Answer 2

您可以为三角形添加另一个div，例如

<div id='triangle'></div>

Css对于三角形...

#triangle{
    width: 0;
    height: 0;
    border-left: 40px solid transparent;
    border-right: 40px solid transparent;
    border-top: 80px solid blue;
}

但是我觉得你的问题并不在于它只是出现了它的定位被搞砸了所以它被隐藏在滑块后面

Answer 3

我想我明白你要做的是什么。这应该在标记上方添加一个三角形。此解决方案应该允许您删除与triangle-down相关的任何内容，因为它只需要slider_marker1 div

#slider_marker1::before {
    content: "";
    width: 0;
    height: 0;
    position: absolute;
    top: -6px;
    left: 0;
    right: 0;
    margin: auto;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-bottom: 4px solid green;
    z-index: 100;
}