css arrow top not working [duplicate] - css

Question

This question already has answers here:
Speech bubble with arrow
(3 answers)
Closed 7 years ago.
I have a css arrow top that I want to display in the top of the div, like this:
the problem is, the arrow is inside the div...
what is wrong here?
#news {
position:absolute;
min-width: 140px;
min-height:100px;
background: #fff;
color: #000;
border:1px solid #000;
}
#news:before {
content: "";
vertical-align: middle;
margin-left: 70px;
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 5px solid black;
}
https://jsfiddle.net/3huzc74a/

Answer 1

Your positioning code was just a little bit off. The best way to position the arrow pseudoelement (thanks to #vals) is to use bottom: 100% along with margin: auto, left: 0, and right: 0. That way your arrow will always stay in the correct position even if you decide to change the arrow's size.
Here is a working live demo:
#bellnews {
position: absolute;
min-width: 140px;
min-height: 100px;
background: #fff;
color: #000;
border: 1px solid #000;
}
#bellnews:before {
content: "";
vertical-align: middle;
margin: auto;
position: absolute;
left: 0;
right: 0;
bottom: 100%;
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 5px solid black;
}
<div id=bellnews>
</div>
JSFiddle Version: https://jsfiddle.net/3huzc74a/3/

Answer 2

Using absolute positioning with left:calc(50% - 5px); will always keep it in the middle no matter the width.
Here's a fiddle
#bellnews {
position:relative;
min-width: 140px;
min-height:100px;
background: #fff;
color: #000;
border:1px solid #000;
display:inline-block;
}
#bellnews:before {
content: "";
position:absolute;
bottom:100%;
width: 0;
height: 0;
left:calc(50% - 5px);
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 5px solid black;
}
<div id=bellnews>
</div>

Answer 3

Try this one with position relative on parent and absolute on child:
#bellnews {
position:relative;
width: 140px;
height:100px;
background: #fff;
color: #000;
border:1px solid #000;
}
#bellnews:before {
content: "";
position: absolute;
vertical-align: middle;
margin-left: 70px;
width: 0;
height: 0;
top: -5px;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 5px solid black;
}
https://jsfiddle.net/3huzc74a/2/

Answer 4

You need to make :before pseudo element absolute .
Then use top to control the position of the pseudo element.
This is a nice tutorial to understand the basics.
Working code
#bellnews {
position: absolute;
min-width: 140px;
min-height: 100px;
background: #fff;
color: #000;
border: 1px solid #000;
width: 100px
}
#bellnews:before {
content: "";
vertical-align: middle;
margin-left: 70px;
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 5px solid black;
position: absolute;
top: -5px;
}
<div id=bellnews>
</div>

Answer 5

If you make the position on the #news div relative, and the triangle absolute, it should work.
Updated your fiddle: https://jsfiddle.net/3huzc74a/7/
#bellnews {
position: absolute;
min-width: 140px;
min-height:100px;
background: #fff;
color: #000;
border:1px solid #000;
}
#bellnews:before {
content: "";
position: absolute;
top: -5px;
vertical-align: middle;
margin-left: 70px;
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 5px solid black;
}