Triangle with one rounded corner

Question

I want to make only one rounded corner for a triangle but I'm unable to make it.
Here is my code:

.arrow-left {
  width: 0;
  height: 0;
  border-top: 80px solid transparent;
  border-bottom: 80px solid transparent;
  border-right: 80px solid blue;
}

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

I need the corner pointing left to be rounded as shown in this image :

Triangle with a rounded corner

Easiest way would be to make a transparent png overlay that has a small white curve on the left side that covers the tip of the triangle... You could also use a box with rounded edges rotated 45degrees with everything but the tip covered up with an opaque div. — Christopher Reid, Apr 08 '14 at 08:00
similar question only on opposite direction - http://stackoverflow.com/questions/11913645/drawing-rounded-triangle-with-css — Pravin W, Apr 08 '14 at 08:02
I would use a SVG nested in an image tag. That would be more semantic for a graphic element than using empty block elements — Nillervision, Apr 08 '14 at 08:14

score 18 · Accepted Answer · edited Jun 12 '19 at 16:11

18

I know this is a little hacky, but I don't think there is an easy way to do this with a single class.

All I've done is rotated a box 45 degrees with border-radius:10px and then contained it in another div with width set to the desired width of your arrow and overflow:hidden so that everything that spills over is invisible.

.arrow-left {
  position: absolute;
  width: 100px;
  height: 100px;
  left: 20px;
  background: black;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  border-radius: 10px;
}

.cover {
  position: absolute;
  height: 100px;
  width: 40px;
  overflow: hidden;
}

<div class="cover">
  <div class="arrow-left"></div>
</div>

edited Jun 12 '19 at 16:11

Emile Bergeron

17,074
5
83
129

answered Apr 08 '14 at 08:08

Christopher Reid

4,318
3
35
74

1

NICE one! I knew you could create arrows with some border hacks, but I didn't knew you could take it further with the border-radius. Did a quick search on caniuse and browser support seems ok(except ie8, but who cares for an arrow), http://caniuse.com/#feat=border-radius – Robbie Bardijn Apr 08 '14 at 08:15

score 15 · Answer 2 · edited May 23 '17 at 12:32

You can make a responsive triangle with one rounded corner with at least 2 approaches :

With CSS:

With one divand a pseudo element and:

absolute positioning
the padding technique to keep the triangle aspect ratio
2d transforms
overflow:hidden;
the transform technique to make the triangle

.arrow-left {  
  position: relative;
  width: 15%;
  padding-bottom:15%;
  border-radius: 10px;
  overflow: hidden;
  transform-origin:100% 0;
  transform: rotate(-45deg);
}
.arrow-left:after {
  content: "";
  position: absolute;
  top: 0; right:8px;
  width:100%; height:141%;
  transform-origin:inherit;
  transform: rotate(45deg);
  background:#000;
}

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

Note that you need to add the vendor prefixes to the transform and transform-origin properties (more info on canIuse)

With inline SVG:

This example uses one path element for the triangle with a bezier curve command for the rounded corner (Q0 5 0.8 4.2 in the d attribute):

svg{
  display:block;
  width:10%;
}

<svg viewbox="0 0 5 10">
  <path d="M5 0 V10 L0.8 5.8 Q0 5 0.8 4.2z" />
</svg>

score 1 · Answer 3 · edited Oct 13 '20 at 11:32

You can try this and modify according to your needs.

http://jsfiddle.net/K44mE/947/

#player {
  margin: 32px;
  position: relative;
  width: 400px;
  height: 250px;
  background-color: #222;
}

#inner {
  transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  background-color: silver;
  width: 100px;
  height: 100px;
  top: 20px;
  left: -60px;
  position: relative;
  -moz-border-radius: 20px;
  border-radius: 20px;
}

#outer {
  position: absolute;
  top: 50px;
  left: 165px;
  width: 70px;
  height: 140px;
  overflow: hidden;
}

<div id="player">

  <div id="outer">
    <div id="inner">&nbsp;</div>
  </div>

</div>

score 0 · Answer 4 · answered Apr 22 '19 at 17:43

use overflow: hidden;

.corner {
 position: absolute;
 border-radius: 4px;
 overflow: hidden;
 top: 0em;
 right: 0em;
 margin: 0em;
 padding: 0em;
 text-align: center;
 border-color: #E8E8E8;
 width: 4em;
 height: 4em;
 z-index: 1;
 -webkit-transition: border-color 0.1s ease;
 transition: border-color 0.1s ease;
 }

.corner:after {
 position: absolute;
 content: "";
 right: 0em;
 top: 0em;
 z-index: -1;
 width: 0em;
 height: 0em;
 background-color: transparent !important;
 border-top: 0em solid transparent;
 border-right: 4em solid transparent;
 border-bottom: 4em solid transparent;
 border-left: 0em solid transparent;
 border-right-color: inherit;
 -webkit-transition: border-color 0.1s ease;
 transition: border-color 0.1s ease;
 }

score -3 · Answer 5 · answered Apr 08 '14 at 08:31

-3

to your code to add this

border-radius:10px

answered Apr 08 '14 at 08:31

AlexPrinceton

1,173
9
12

Triangle with one rounded corner

5 Answers5

With CSS:

With inline SVG:

Linked

Related