Html/Css Triangle With Pseudo Elements

Looking to use pseudo elements to create a triangle

This will set the positioning and create a down pointing arrow. The numbers are custom and can be adjusted to change the size of the arrow and its position.

.overviews-list > li.active > ul.submenu > li.active {
  position: relative;
}

.overviews-list > li.active > ul.submenu > li.active:after {
  position: absolute;
  content: "";
  width: 0px;
  height: 0px;
  border-top: 15px solid white;
  border-right: 15px solid transparent;
  border-bottom: 15px solid transparent;
  border-left: 15px solid transparent;
  top: 25%;
  right: 10px;
}

JS Fiddle

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>

using pseudo :after-element to create a triangle shape color overlay

You can consider a multiple background layer to achieve this:

html,body {  width: 100%;  height: 100%;  margin: 0;}
.bg-img {  height: 100%;  background-blend-mode: multiply;  background:     url("http://unsplash.it/1200x800") center/cover,    linear-gradient(rgba(41, 196, 169, 0.61),rgba(41, 196, 169, 0.61)) right/50% 100%,   linear-gradient(to bottom right,transparent 49.8%,rgba(41, 196, 169, 0.61) 50%) calc(50% - 50px) 0/100px 50.05%,   linear-gradient(to top right,   transparent 49.8%,rgba(41, 196, 169, 0.61) 50%) calc(50% - 50px) 100%/100px 50.05%;  background-repeat: no-repeat;}

<div class="bg-img"></div>

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 :before element

You need to specify the content property.

For positioning, add position:relative to the parent, and then absolutely position the arrow -15px to the left.

jsFiddle example

.d {
    position:relative;
}

.d:before {
    content:"\A";
    border-style: solid;
    border-width: 10px 15px 10px 0;
    border-color: transparent #dd4397 transparent transparent;
    position: absolute;
    left: -15px;
}

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

Shadow for the shape(triangle) created with pseudo element

You can use a pseudo elemnt and skew.

Then dispatch shadows inside and outside to hide each other where needed :

DEMO

CSS

#a {
  background: turquoise ;
  margin:1em;
}
#b {
  background: tomato ;
  margin:1em auto;
}
#c {
  background: orange ;
  margin:1em 18%;
}
div {box-shadow:0 0 5px; width:80%;}
div:after {/* after so it comes last */
  content:'';
  display:block;
  height:1.4em;/* tune its-height */
  position:relative;/* to move a bit to hide box-shadow of div parent */
  top:5px;
  left:-10px;
  background:white;
  width:30%;/* tune its size */
  box-shadow:
    inset  18px  0 0 white,
    inset 0px -3px white,
    inset 0 0 3px   black;
  transform:skew(45deg);
}

HTML base :

<div id="a">a <br/><!--demo behavior purpose--> A</div> 
<div id="b">b</div>   
<div id="c">c</div>

How add a triangle as a pointer onto an html element using pure css and html

.triangleTest { position: relative; background: lightgray; border-radius: .4em;  height: 100px;  width: 100px;  text-align: center;}.triangleTest h1 {padding-top: 25px;}.triangleTest:after { content: ''; position: absolute; left: 0; top: 50%; width: 0; height: 0; border: 0.563em solid transparent; border-right-color: lightgray; border-left: 0; margin-top: -0.562em; margin-left: -0.562em;}

<div class="triangleTest"><h1>Hello</h1></div>