How to Add Bordered Triangle Over a Div Tag

Create div with triangle border in css

You can use ::before and ::after with borders on two adjacent sides (e.g. top and right) and then transform: rotate and position: absolute them to create the left and right parts, e.g.

<div class="arrow"></div>

.arrow {
  height: 75px;
  width: 200px;
  border-top: 4px solid black;
  border-bottom: 4px solid black;
  position: relative;
}
.arrow::before, .arrow::after {
  content: "";
  border-top: 4px solid black;
  border-right: 4px solid black;
  height: 55px;
  width: 55px;
  position: absolute;
  transform: rotate(45deg);

}

.arrow::before {
  top: 8px;
  left: -30px;
}

.arrow::after {
  top: 8px;
  right: -30px;
}

Here's an example.

How to add bordered triangle over a div tag

Using the initial box with pointer and shadows at http://cssarrowplease.com/ you can restyle them to make the shape you want:

.arrow_box {  top: 40px;  position: relative;  background: #ffffff;  border: 1px solid #719ECE;  /*set border colour here*/  width: 200px;  height: 200px;  border-radius: 3px;  -webkit-filter: drop-shadow(0 1px 10px rgba(113, 158, 206, 0.8)); /*set shadow colour  and size here*/  -moz-box-shadow: 0 1px 10px rgba(113, 158, 206, 0.8);  filter: drop-shadow(0 1px 10px rgba(113, 158, 206, 0.8));}
.arrow_box:after,.arrow_box:before {  bottom: 100%;  border: solid transparent;  content: " ";  height: 0;  width: 0;  position: absolute;  pointer-events: none;}
.arrow_box:after {  border-color: rgba(255, 255, 255, 0);  border-bottom-color: #ffffff;  border-width: 19px;  left: 50%;  margin-left: -19px;}
.arrow_box:before {  border-color: rgba(113, 158, 206, 0);  border-bottom-color: #719ECE;  border-width: 20px;  left: 50%;  margin-left: -20px;}

<div class="arrow_box"></div>

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>

Adding a border to div with top triangle

Actually the "triangle part" is a border itself, that's why you can't apply a CSS border to it, However there's a workaround.

use the :before pseudo-element to create another triangle bigger than the first and apply your border color to it.

.info-panel {  display: block;  position: relative;  background: #FFFFFF;  padding: 15px;  border: 1px solid #DDDDDD;  margin-top: 20px;}.info-panel:before, .info-panel:after {  content: '';  display: block;  position: absolute;  bottom: 100%;  width: 0;  height: 0;}.info-panel:before {  left: 19px;  border: 11px solid transparent;  border-bottom-color: #ddd;}.info-panel:after {  left: 20px;  border: 10px solid transparent;  border-bottom-color: #fff;}

<div class="info-panel">  Testing</div>

Create a triangle on both top corners of Div, divided by borders

What about an easy way with less of code and linear-gradient:

.element {  width:300px;  height:100px;  background:   linear-gradient(to bottom left,  red 50%,transparent 50%) 100% 0/50px 50px,   linear-gradient(to bottom right, green 50%,transparent 50%) 0 0/50px 50px,      linear-gradient(to bottom right, brown 50%,transparent 50%) 0 0/60px 60px,   linear-gradient(to bottom left,  pink 50%,transparent 50%) 100% 0/60px 60px,  orange;  background-repeat:no-repeat;  text-align:center;  color:#fff;  font-size:40px;}

<div class="element"> A </div>

How to add bordered triangle over a full screen div tag

The div with class was starting from the top so some part of it was under the navbar, I have added a margin-top to the mdiv and adjusted the sizes accordngly and it works fine, thanks, here is the updated, codePen

Border around a div with a triangle point at the bottom

You can first create one element with border except border-bottom and then use :before and :after pseudo-elements to add triangle border at bottom.

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 add 2 bordered triangle over a div tag

Here is the updated Demo

    .arrow_box {        top:40px;        position: relative;        background: #ffffff;        border: 1px solid #719ECE;        width: 200px;        height: 22px;        border-radius: 3px;        -webkit-filter: drop-shadow(0 1px 10px rgba(113,158,206,0.8));        -moz-box-shadow: 0 1px 10px rgba(113,158,206,0.8);        filter: drop-shadow(0 1px 10px rgba(113,158,206,0.8));    }    .arrow_box:after,     .arrow_box:before {        bottom: 100%;        border: solid transparent;        content: " ";        height: 0;        width: 0;        position: absolute;        pointer-events: none;    }        .arrow_box:after {        border-color: rgba(255, 255, 255, 0);        border-bottom-color: #719ECE;        border-width: 19px;        right: 0%;        /* margin-left: -10px; */    }    .arrow_box:before {        border-color: rgba(113, 158, 206, 0);        border-bottom-color: #719ECE;        border-width: 20px;        left: 10%;        margin-left: -20px;    }

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" crossorigin="anonymous">    <div id="nicebox" class="arrow_box">  <a href="logout.php"></a>
   <span class="pull-left"><i class="fa fa-long-arrow-up" aria-hidden="true"></i>Best </span>      <span class="pull-right">Worst</span>     </div>