css arrow top not working

Question

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/

No need of vertical align:middle and width:0 and height:0.. juz position:absolute and margin-top:-5px — Vaibhav, Feb 10 '16 at 17:49

Maximillian Laumeister · Accepted Answer · 2016-02-10T17:53:16.797

4

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/

edited Feb 10 '16 at 17:53

answered Feb 10 '16 at 17:46

Maximillian Laumeister

19,884
8
59
78

A little better system to position it is bottom: 100%. If you change the border-bottom in the future, it will adjust automatically – vals Feb 10 '16 at 17:48
and to center it, use margin: auto; left: 0px; right: 0px; https://jsfiddle.net/xg9ucmf5/ – vals Feb 10 '16 at 17:50
it is nice because need this to be position absolute, thank you friend! – RGS Feb 10 '16 at 17:57

ghyjek · Answer 2 · 2016-02-10T17:54:33.840

1

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/

edited Feb 10 '16 at 17:54

answered Feb 10 '16 at 17:46

ghyjek

128
1
10

It's not needed to make the news div relative. Any value for positon aside from static will create a new positioning context. – Maximillian Laumeister Feb 10 '16 at 17:57

Sooraj · Answer 3 · 2016-02-10T17:56:37.253

1

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>

edited Feb 10 '16 at 17:56

answered Feb 10 '16 at 17:46

Sooraj

9,717
9
64
99

The parent div definitely does not need to be `position: relative`. Any value for position aside from `static` will cause a new positioning context to be created. – Maximillian Laumeister Feb 10 '16 at 17:55
It has been corrected. – Sooraj Feb 10 '16 at 17:57

zzayphod · Answer 4 · 2016-02-10T18:15:48.573

1

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

edited Feb 10 '16 at 18:15

answered Feb 10 '16 at 17:49

zzayphod

81
5

It's not needed to make the `news` div relative. Any value for positon aside from `static` will create a new positioning context. – Maximillian Laumeister Feb 10 '16 at 17:57
@MaximillianLaumeister -Thanks, updated. – zzayphod Feb 10 '16 at 18:16

score 1 · Answer 5 · answered Feb 10 '16 at 17:52

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>

css arrow top not working

5 Answers5