CODEWITHSUNDEEP
htmlcss
Jal
Jal

Reputation: 2312

How to make a border triangle using css?

How to create border triangle?

enter image description here

The only thing I can think of to make this is to make a triangle

    .triangle {
        width: 0; 
        height: 0; 
        border-left: 15px solid transparent;
        border-right: 15px solid transparent;
        border-bottom: 20px solid #8e8e8e;
    }

But this is a solid triangle, is there a way to make it look like the triangle extends the border

Upvotes: 2

Views: 1015

Answers (2)

Moshe Harush
Moshe Harush

Reputation: 701

You need to move triangle element to under sub layout. I added more triangle for the border design.

.balon {
  width: 350px;
  height: 120px;
  border: 5px solid #2C6DBF;
  margin: 50px auto;
  position: relative;
  border-radius: 8px;
}
.balon::after, .balon::before {
  width: 0;
  height: 0;
  content: '';
  border-left: 15px solid transparent;
  border-right: 15px solid transparent;
  border-top: 21px solid #fff;
  position: absolute;
  bottom: -19px;
  right: 0;
  left: 0;
  margin: auto;
}
.balon::before {
  border-left-width: 20px;
  border-right-width: 20px;
  border-top-width: 25px;
  border-top-color: #2C6DBF;
  bottom: -25px;
}
<div class="balon">
  
</div>

Upvotes: 2

roberrrt-s
roberrrt-s

Reputation: 8210

Create an :after or :before element that absolutely positions at the bottom of your div.

.box {
  position: relative;
  background-color: #F00;
  border: 1px solid #000;
  width: 50px;
  height: 50px;
}

.box:after {
  content: "";
  width: 16px;
  height: 16px;
  position: absolute;
  background-color: #FFF;
  bottom: -8px;  /* half of the elements width/height */
  left: 50%;
  transform: translateX(-50%) rotate(45deg);
  border-bottom: 1px solid #000;
  border-right: 1px solid #000;
}
<div class="box">

I've made the :after element white so you can see what's happening inside of it.

Upvotes: 6

Related Questions