https://i.sstatic.net/9YIiy.jpg
I have been working on creating the top right triangle design shown in the image. However, I encountered an issue where applying border radius seems to affect all sides instead of just one as intended. Despite using border-top-right-radius: 5px;, I am not getting the desired outcome and it is appearing the same as when using border-radius: 0px 5px 0px 0px;. Any suggestions?
Here is the HTML code:
<div class="pricing-head">
<h3>Rainmarker</h3>
<span>For up to 10 users</span>
<div class="ribon"></div>
</div>
And here is the CSS styling:
.pricing-head {
background-color: #fff;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
padding: 20px;
}
.pricing-head .ribon {
position: absolute;
top: 0;
right: 0;
width: 75px;
height: 75px;
}
.pricing-head .ribon:before {
content: "";
position: absolute;
right: 0;
top: 0;
border-bottom: 70px solid transparent;
border-left: 70px solid transparent;
border-right: 70px solid #ffad6a;
border-radius: 0 5px 0 0;
}