Center Triangle at Bottom of Div

div {  width: 200px;  height: 150px;  border: 1px solid black;  border-bottom: none;  position: relative;  background: white;  margin: 20px;}div:after, div:before {  content: '';  width: 0;  height: 0;  border-style: solid;  border-width: 50px 101px 0 101px;  border-color: black transparent transparent transparent;  top: 100%;  left: -1px;  position: absolute;}div:after {  border-color: white transparent transparent transparent;  top: calc(100% - 1px);  }

<div></div>

How to CSS triangle at the bottom and center it in div ( Horizontal Menubar )?

Add position:relative to your CSS for li

Demo Fiddle

li {
    display: table-cell;
    list-style: none;
    text-align: center;
    padding: 20px;
    color: black;
    font-size: 18px;
    position:relative; /* <-- this */
}

You may also want to revise some of the rest of your CSS thus:

#bar {
    width:100%;
    height: 100px;
}
li {
    list-style: none;
    text-align: center;
    padding: 20px;
    color: black;
    font-size: 18px;
    position:relative;
    display:inline-block; /* <-- make the items appear on the same row, you shouldnt be using displace:table-cell */
}
.btn.selected {
    color: black !important;
    font-size: 18px;
    background-color: #f7eee7;
}
.btn:hover:after {
    content:"";
    position: absolute;
    left:calc(50% - 9px); /* <-- ensure your triangles are centered */
    bottom: 0;
    width: 0%;
    height: 0;
    border-left: 9px solid transparent;
    border-right: 9px solid transparent;
    border-bottom: 9px solid black;
}

Horizontally center small triangle at bottom of div and resize responsively and proportionately

Responsive triangles with PURE CSS and without media queries.

See this codeitdown article

FIDDLE

Resize the window and watch the triangle resize responsively !

Markup

<div class="top">
    <div class="triangle-down"></div>
</div>
<div class="bottom"></div>

CSS

.top
{
    background: pink;
    height: 100px;
    position: relative;
}

.bottom
{
    background: lightGreen;
    height: 100px;
}
.triangle-down{
    width: 2.5%;
    height: 0;
    padding-left:2.5%;
    padding-top: 2.5%;
    overflow: hidden;
    position: absolute;
    left:0;right:0;  /* center the arrow */
    margin:auto;  /* center the arrow */
    top: 100px; /* height of top section */
    z-index:1;
}
.triangle-down:before {
    content: '';
    display: block;
    width: 0;
    height: 0;
    margin-left:-50px;
    margin-top:-50px;

    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-top: 50px solid pink;
}

How the heck does it work?

Well, firstly we need to decide two things:

1) The width/height ratio of the triangle. In the above example (and for simplicity) I used a ratio of 2:1.

2) How much of the container/viewport width we want our triangle to take up. In the above example I used a triangle of 5% of the viewport width: (width 2.5% + padding-left:2.5%;)

Now set up the other properties /proportions according to the following rules: (from above article)

1) (padding-left + width)/padding-top = (border-left +
border-right)/border-top = base/height

2) margin-left = -border-left = -border-right

3) margin-top = -border-top

4) width = padding-left

Customizing the responsive triangle:

Let's say you wanted a triangle of ratio 3:1 and for it to take up 6% of the width..

No problem!

ANOTHER FIDDLE (This one actually looks more like the picture)

Modify CSS to this:

.triangle-down{
    width: 3%;
    height: 0;
    padding-left:3%;
    padding-top: 2%;
    overflow: hidden;
    position: absolute;
    left:0;right:0;
    margin:auto;
    top: 100px;
    z-index:1;
}
.triangle-down:before {
    content: '';
    display: block;
    width: 0;
    height: 0;
    margin-left:-50px;
    margin-top:-33px;

    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-top: 33px solid pink;
}

Enjoy!

CSS Triangle bottom right of parent div

I created a container for the amount with absolute position right 3px and bottom -45px.

.container {  background-color: red;  height: 200px;  width: 400px;  position:relative;}  
.gradeTriangle{    width: 0px;    height:0px;    border-bottom: 50px solid #000;    border-left: 50px solid transparent;    bottom: 0;    right: 0;    position: absolute;    color: green    }.amountContainer{    position:absolute;    padding:1%;    bottom:-45px;    right:3px;}

<div class="container">  <div class="gradeTriangle">    <div class="amountContainer">$25</div>  </div></div>

.white {  min-height:100px;  padding-bottom:40px;  background:    linear-gradient(to bottom left,      #fff calc(50% - 6px),yellow calc(50% - 5px),      yellow 50%,transparent 51%) -100px 100%/calc(50% + 101px) 40px,          linear-gradient(to bottom right,      #fff calc(50% - 6px),yellow calc(50% - 5px),      yellow 50%,transparent 51%) calc(100% + 100px) 100%/calc(50% + 101px) 40px,          linear-gradient(#fff,#fff) top/100% calc(100% - 40px);  background-repeat:no-repeat;  position:relative;}.grey {  height:100px;  background:grey;  margin-top:-50px;}body { background:pink;}

<section class="white"></section><section class="grey"></section>