How to Position a CSS Triangle Using ::After

How to position a CSS triangle using ::after?

Just add position:relative to the parent element .sidebar-resources-categories

http://jsfiddle.net/matthewabrman/5msuY/

explanation: the ::after elements position is based off of it's parent, in your example you probably had a parent element of the .sidebar-res... which had a set height, therefore it rendered just below it. Adding position relative to the .sidebar-res... makes the after elements move to 100% of it's parent which now becomes the .sidebar-res... because it's position is set to relative. I'm not sure how to explain it but it's expected behaviour.

read more on the subject: http://css-tricks.com/absolute-positioning-inside-relative-positioning/

CSS Triangle + After Implementation

Changing the triangle to position: absolute; and adding position: relative; to the .box fixes it. It seems to be inheriting the height of the box.

Html/Css Triangle with pseudo elements

The issue is with the use of border. you can check this link How do CSS triangles work? and you will understand how border works and why you get this output.

An alternative solution is to use rotation and border like this :

.box {  border: 1px solid;  margin: 50px;  height: 50px;  position:relative;  background: #f2f2f5;}
.box:before {  content: "";  position: absolute;  width: 20px;  height: 20px;  border-top: 1px solid;  border-left: 1px solid;  top: -11px;  left: 13px;  background: #f2f2f5;  transform: rotate(45deg);}

<div class="box">
</div>

How do CSS triangles work?

CSS Triangles: A Tragedy in Five Acts

As alex said, borders of equal width butt up against each other at 45 degree angles:

When you have no top border, it looks like this:

Then you give it a width of 0...

...and a height of 0...

...and finally, you make the two side borders transparent:

That results in a triangle.

Draw triangle in corner of div

You can use position: absolute on triangle element and set top and right properties to 0.

.container {  position: absolute;  top: 5%;  left: 5%;  width: 60%;  height: 30%;  background: black;  color: white;  border-radius: 12px;  overflow: hidden;}
.triangle {  width: 0;  height: 0;  border-style: solid;  border-width: 0 30px 30px 0;  border-color: transparent #608A32 transparent transparent;  right: 0;  top: 0;  position: absolute;}

<div class="container">  <div class="triangle"></div></div>

Center Triangle at Bottom of Div

Can't you just set left to 50% and then have margin-left set to -25px to account for it's width: http://jsfiddle.net/9AbYc/

.hero:after {
    content:'';
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -50px;
    width: 0;
    height: 0;
    border-top: solid 50px #e15915;
    border-left: solid 50px transparent;
    border-right: solid 50px transparent;
}

or if you needed a variable width you could use: http://jsfiddle.net/9AbYc/1/

.hero:after {
    content:'';
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin: 0 auto;
    width: 0;
    height: 0;
    border-top: solid 50px #e15915;
    border-left: solid 50px transparent;
    border-right: solid 50px transparent;
}

Adding a triangle in css under another element

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.

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

CSS Triangle Positioning

Here is some jQuery to get rid of the hard-coded heights after assigning an arrowBox class to your div:

$(document).ready(function(){
  $(".arrowBox").each(function(){
    var border = $(this).height()/4;
    var right = "-"+(border-5)+"px";
    $(this).find(".arrow").css("border-width",border).css("right",right);
  });
});

http://jsfiddle.net/wzzRC/1/

That said, the difficulty with any pure CSS solution is that you can't specify border-width in %. So with pure CSS, use one of the other solutions to force the box to grow to accommodate the arrow. If you want a working arrow in smaller boxes, you need JS.

---

Related Topics