How to create play button with border-radius? - html

Question

Hi I'm trying to make a Pomodoro clock. I've made a play button by removing border-right and increasing border-left width to create a triangle.
My questions is - how do I apply border-radius to it?
https://codepen.io/jenlky/pen/ypQjPa?editors=1100
<div id="all-buttons" class="buttons">
<!-- play button -->
<div id="play" class="play-button"></div>
<!-- pause button -->
<div id="pause">
<div class="line-1"></div>
<div class="line-2"></div>
</div>
<!-- end of play and pause button-->
</div>
.play-button {
z-index: 2;
width: 48px;
height: 48px;
border-style: solid;
border-width: 24px 0px 24px 48px;
border-color: white white white #FF8F83;
}

Answer 1

HTML play button:
.circle_inner{
position: relative;
height: 100%;
}
.circle_inner:before{
content: "";
display: block;
width: 0;
height: 0;
border-style: solid;
border-width: 10px 0 10px 20px;
border-color: transparent transparent transparent #000;
position: absolute;
top: 50px;
left: 50%;
margin: -10px 0 0 -7px;
}
<div class="circle_inner">
</div>

Answer 2

Try this (Less)
<div class="control play">
<span class="left"></span><span class="right"></span>
</div>
.control {
#color: #ffb160;
#highlight: darken(#color, 10%);
#duration: 0.4s;
#sin: 0.866;
#size: 112px;
border-radius: 50%;
margin: 20px;
padding: #size*0.25;
width: #size;
height: #size;
font-size: 0;
white-space: nowrap;
text-align: center;
cursor: pointer;
&, .left, .right, &:before {
display: inline-block;
vertical-align: middle;
transition: border #duration, width #duration, height #duration, margin #duration;
transition-tiomig-function: cubic-bezier(1, 0, 0, 1);
}
&:before {
content: "";
height: #size;
}
&.pause {
.left, .right {
margin: 0;
border-left: #size*0.33 solid #color;
border-top: 0 solid transparent;
border-bottom: 0 solid transparent;
height: #size*#sin;
}
.left {
border-right: #size*0.2 solid transparent;
}
}
&.play {
#border: #size/4;
.left {
margin-left: #size/6;
border-left: #size*#sin/2 solid #color;
border-top: #border solid transparent;
border-bottom: #border solid transparent;
border-right: 0px solid transparent;
height: #size - 2*#border;
}
.right {
margin: 0;
border-left: #size*#sin/2 solid #color;
border-top: #border solid transparent;
border-bottom: #border solid transparent;
height: 0px;
}
}
&:hover {
border-color: #highlight;
.left, .right {
border-left-color: #highlight;
}
}
}