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

I have been trying hard without success to add a little triangle under my square to act as a pointer like this:

我一直在努力尝试没有成功在我的方块下面添加一个小三角形作为这样的指针:

My code by itself works, but whenever I try to add css to make this triangle nothing will appear. I think it has to do with before-after functions, but I'm not really getting it. Anyone can help me with that?

我的代码本身可以工作,但每当我尝试添加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>

edit: code of the triangle

编辑:三角形的代码

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

3 个解决方案

#1

Generally in CSS triangles are made using borders, not before and after pseudo elements. To create a downward pointing triangle, you would create a top border of n number of pixels, and left and right borders of half that width and also transparent.

通常,CSS三角形是使用边框制作的,而不是伪元素之前和之后。要创建向下指向的三角形,您将创建n个像素的顶部边框,以及宽度的一半和透明的左右边框。

Example:

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

See my codepen here: https://codepen.io/anon/pen/bvXOab

请在此处查看我的codepen:https://codepen.io/anon/pen/bvXOab

#2

You could add another div for the triangle like

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

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

Css For the triangle...

Css三角形......

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

However I feel that your problem is not that it just isnt appearing its that the positioning is messed up so its 'hidden' behind the sliders

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

#3

I think I understand what you're trying to make. This should add a triangle above the marker. This solution should allow you to also remove anything related to triangle-down as it only requires the slider_marker1 div

我想我明白你要做的是什么。这应该在标记上方添加一个三角形。此解决方案应该允许您删除与三角形向下相关的任何内容,因为它只需要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;
}