CODEWITHSUNDEEP
htmlcsscss-shapes
AnApprentice
AnApprentice

Reputation: 110960

Is it possible to make a rounded triangle with just CSS?

I'm trying to make the following shape with just CSS:

Rounded Triange

Here is what I currently have:

.triangle {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 56px 56px 0 0;
  border-color: #ff4369 transparent transparent transparent;
}
<div class="triangle">
</div>

I'm unable to use border radius to make the top-left corner rounded... Is there another way to do this or do I need to use an SVG?

Upvotes: 8

Views: 6254

Answers (4)

Temani Afif
Temani Afif

Reputation: 272909

You can easily do with linear-gradient and it's well supported:

body {
  background: #ccc;
}

.triangle {
  margin: 10px;
  width: 56px;
  height: 56px;
  background: linear-gradient(to bottom right, #ff4369 50%, transparent 0);
  border-radius: 10px 0 0 0;
}
<div class="triangle">
</div>

Upvotes: 5

andreas
andreas

Reputation: 16946

To actually answer your question (and provide the first answer without border-radius): If you want a CSS only solution, you will have to use border-radius.

Nevertheless I would highly recommend to use SVG for creating shapes, as simple shapes like this are easy to create manually, it's responsive, it's widely supported now and (as @chharvey mentioned in the comments) semantically more appropriate.

<svg viewbox="0 0 50 50" height="56px">
  <path d="M1 50 V10 Q1 1 10 1 H50z" fill="#ff4369" />
</svg>

You can find more information about the path properties in the specs.

Upvotes: 5

VXp
VXp

Reputation: 12068

You might consider the border-radius and clip-path: polygon() solution:

.triangle {
  width: 56px;
  height: 56px;
  background: #ff4369;
  border-top-left-radius: 12px;
  -webkit-clip-path: polygon(0 0, 0% 100%, 100% 0);
  clip-path: polygon(0 0, 0% 100%, 100% 0);
}
<div class="triangle"></div>

And another solution with the :before or :after pseudo-element, which can serve as a layer:

.triangle {
  width: 56px;
  height: 56px;
  background: #ff4369;
  border-top-left-radius: 12px;
  position: relative;
  overflow: hidden;
}

.triangle:after {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 100%;
  height: 100%;
  background: #fff;
  transform: skew(-45deg);
}
<div class="triangle"></div>

Upvotes: 5

ashfaq.p
ashfaq.p

Reputation: 5469

Yes it's possible using border-radius:

.triangle {
  box-sizing: border-box;
  width: 60px;
  height: 60px;
  border-top: solid 30px rgb(200,30,50);
  border-left: solid 30px rgb(200,30,50);
  border-top-left-radius: 12px;
  border-right: solid 30px transparent;
  border-bottom: solid 30px transparent;
}
<div class="triangle triangle-0"></div>

Upvotes: 11

Related Questions