How can we make this shape using CSS - html

Question

How can we make this shape using CSS?
I'm able to write the below code using CSS but the shape generated output is a bit off. Can we do that using CSS?
.btn-arrow {
width: 15px;
height: 24px;
border: 2px solid red;
border-top-right-radius: 40px;
border-bottom-right-radius: 40px;
border-left: 0;
display: inline-block;
position: relative;
}
.btn-arrow:after,
.btn-arrow:before {
right: 100%;
top: 50%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
}
.btn-arrow:after {
border-right-color: white;
border-width: 12px;
margin-top: -12px;
}
.btn-arrow:before {
border-right-color: red;
border-width: 14px;
margin-top: -14px;
}
body {
padding: 20px;
}
<div class="btn-arrow"></div>

Answer 1

With CSS you can achieve that.
Just create ::after and ::before pseudoelements and the main box rotate 45 degrees. You can adjust the degrees on the linear-gradient part instead of "to right" sentence.
This trick is necessary because border-image and border-radius can't live both on the same element.
You can see more about this:
Possible to use border-radius together with a border-image which has a gradient?
https://css-tricks.com/examples/GradientBorder/
.shape {
position:relative;
width: 100px;
border-radius: 100% 100% 100% 0;
height: 100px;
transform: rotate(45deg);
margin: 0 auto;
background: white;
background-clip: padding-box;
}
.shape::after {
position: absolute;
top: -8px;
bottom: -8px;
left: -8px;
right: -8px;
background: linear-gradient(to right, #fe3870, #fc5d3e);
content: '';
z-index: -1;
border-radius: 100% 100% 100% 0;
}
.shape::before {
position: absolute;
top: 8px;
bottom: 8px;
left: 8px;
right: 8px;
background: white;
content: '';
z-index: 1;
border-radius: 100% 100% 100% 0;
}
<div class="shape">
</div>

Answer 2

One of many possible solutions in just CSS:
This solution only requires one pseudo element.
.btn-arrow {
width: 44px;
height: 44px;
border-top-right-radius: 40px;
border-top-left-radius: 40px;
border-bottom-right-radius: 40px;
background: -webkit-linear-gradient(left, rgba(232,51,105,1) 0%,rgba(235,94,67,1) 100%); /* Chrome10-25,Safari5.1-6 */
transform:rotate(45deg);
position: relative;
}
.btn-arrow::after {
display: block;
width: 30px;
height: 30px;
border-top-right-radius: 40px;
border-top-left-radius: 40px;
border-bottom-right-radius: 40px;
background: white;
position: absolute;
content: '';
top: 7px;
left: 7px;
}
body {
padding: 20px;
}
<div class="btn-arrow"></div>

Answer 3

Adjust the CSS to look like this
.btn-arrow {
width: 30px;
height: 30px;
border: 2px solid red;
border-radius: 100%;
border-left: 0;
display: inline-block;
position: relative;
}
.btn-arrow:after,
.btn-arrow:before {
right: calc(100% - 6px);
top: 50%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
}
.btn-arrow:after {
border-right-color: white;
border-width: 12px;
margin-top: -12px;
}
.btn-arrow:before {
border-right-color: red;
border-width: 14px;
margin-top: -14px;
}
body {
padding: 20px;
}