CODEWITHSUNDEEP
css
Gavin
Gavin

Reputation: 7976

CSS arrow has glitch when aligned to the right side

I'm using CSS to put a little arrow on a dropdown menu container.

http://jsfiddle.net/0bscj7tm/

#nav {
    position: relative;
    width: 200px;
    height: 200px;
    top: 20px;
    padding: 20px;
    border: 1px solid #f00;
    background: #fff;
}
#nav:after,
#nav:before {
    content: ' ';
    position: absolute;
    width: 0;
    height: 0;
    bottom: 100%;
    left: 20px;
    border: solid transparent;
    pointer-events: none;
}
#nav:before {
    border-color: rgba(0, 255, 255, 0);
    border-bottom-color: #f00;
    border-width: 8px;
    margin-left: -8px;
}
#nav:after {
    border-color: rgba(255, 255, 255, 0);
    border-bottom-color: #fff;
    border-width: 7px;
    margin-left: -7px;
}

However, I want the arrow aligned a set number of pixels from the right side. In the #nav:after, #nav:before class, I changed left: 20px to right: 20px, but that makes the border of the arrow too thick on the left side and not visible on the right side: http://jsfiddle.net/vx2Lpt19/1/

Can somebody help me get the arrow to look correctly when aligned 20 pixels from the right side?

Upvotes: 2

Views: 59

Answers (3)

Paulie_D
Paulie_D

Reputation: 115374

To be honest the existing margins on the pseudo-elements didn't seem to do much when I tinkered with them.

However, removing them and just applying a single -1px margin seemed to do the trick.

body {
  background: #ccc;
}
#nav {
  position: relative;
  width: 200px;
  height: 200px;
  top: 20px;
  padding: 20px;
  border: 1px solid #f00;
  background: #fff;
}
#nav:after,
#nav:before {
  content: ' ';
  position: absolute;
  width: 0;
  height: 0;
  bottom: 100%;
  right: 20px;
  border: solid transparent;
  pointer-events: none;
}
#nav:before {
  border-color: rgba(0, 255, 255, 0);
  border-bottom-color: #f00;
  border-width: 8px;
  margin-right: -1px;
}
#nav:after {
  border-color: rgba(255, 255, 255, 0);
  border-bottom-color: #fff;
  border-width: 7px;
}
<div id="nav">
  content
</div>

Upvotes: 1

itzmurd4
itzmurd4

Reputation: 663

Try this:

#nav:before {
border-color: rgba(0, 255, 255, 0);
border-bottom-color: #f00;
border-width: 9px;
margin-right: -2px;
}


body {
    background: #ccc;
}
#nav {
    position: relative;
    width: 200px;
    height: 200px;
    top: 20px;
    padding: 20px;
    border: 1px solid #f00;
    background: #fff;
}
#nav:after,
#nav:before {
	content: ' ';
	position: absolute;
	width: 0;
	height: 0;
	bottom: 100%;
	right: 20px;
	border: solid transparent;
	pointer-events: none;
}
#nav:before {
	border-color: rgba(0, 255, 255, 0);
	border-bottom-color: #f00;
	border-width: 9px;
	margin-right: -2px;
}
#nav:after {
	border-color: rgba(255, 255, 255, 0);
	border-bottom-color: #fff;
	border-width: 7px;
	margin-left: -7px;
}
<div id="nav">
    content
</div>

Upvotes: 1

Anthony Hilyard
Anthony Hilyard

Reputation: 1250

Try changing your margin-left declarations to margin-right under #nav:before and #nav:after.

Here's what it looks like after that change: http://jsfiddle.net/o4efcsk8/

Upvotes: 2

Related Questions