Css Bordered Triangle

Question

I'm working on a project that needs a specific element. It is a Bordered Triangle like the picture below. Is it even possible to make this object in HTML/CSS.

Simple triangles only have straight borders

.tri {
  display: inline-block;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 80px solid blue;
}

<div class="tri"></div>

That looks more like a bell shape than a bordered triangle to me. If you are actually looking for a bordered triangle, have a look at this answer - stackoverflow.com/questions/18057669/border-within-border-css/…. Here is an answer about a shape which resembles the one in question - stackoverflow.com/questions/19504215/… — Harry
– Harry, Commented Aug 19, 2015 at 9:30
Welcome to Stack Overflow! Please review How to ask questions on Stack Overflow and what types of questions can be asked and what types should be avoided. — Paulie_D
– Paulie_D, Commented Aug 19, 2015 at 9:31
@Paulie_D How many times a day do you post that or something similar? — Jay
– Jay, Commented Aug 19, 2015 at 9:59
Many, many times...because often new users don't bother to read and understand those guidleines or if they do they ignore them. — Paulie_D
– Paulie_D, Commented Aug 19, 2015 at 10:05

Stewartside · Accepted Answer · 2015-08-19 10:13:51Z

6

This can be achieved with SVG which is probably your best alternative.

<svg width="150px" height="100px" viewbox="0 0 10 10" preserveAspectRatio="none">
  <path d="M5,0 Q8,3 8,8 Q5,10 2,8 Q2,3 5,0" fill="skyblue"></path>
</svg>

An alternative could be created with pseudo elements but is a very dirty way of achieving what you want.

div {
  width: 0;
  height: 0;
  border-left: 25px solid transparent;
  border-right: 25px solid transparent;
  border-bottom: 40px solid skyblue;
  border-bottom-right-radius: 40px;
  border-bottom-left-radius: 40px;
}
div::before {
  content: '';
  border-left: 25px solid transparent;
  border-right: 25px solid transparent;
  border-bottom: 25px solid skyblue;
  border-bottom-right-radius: 50%;
  border-bottom-left-radius: 50%;
  width: 0;
  height: 0;
  position: absolute;
  left: 5px;
  top: 13px;
  transform: rotate(120deg);
}
div::after {
  content: '';
  border-left: 25px solid transparent;
  border-right: 25px solid transparent;
  border-bottom: 25px solid skyblue;
  border-bottom-right-radius: 50%;
  border-bottom-left-radius: 50%;
  width: 0;
  height: 0;
  position: absolute;
  left: 10px;
  top: 13px;
  transform: rotate(-120deg);
}

<div></div>

edited Aug 19, 2015 at 10:13

answered Aug 19, 2015 at 9:58

Stewartside

21k13 gold badges64 silver badges82 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Paulie_D Over a year ago

Beat me to it...very nice.

Collectives™ on Stack Overflow

Css Bordered Triangle

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related