Triangle with one rounded corner - css

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 :

Answer 1

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>

Answer 2

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>

Answer 3

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"> </div>
</div>
</div>

Answer 4

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;
}

Answer 5

to your code to add this
border-radius:10px