How to make 3-corner-rounded triangle in CSS

Question

I\'d like to achieve a custom-colored shape like this using no Javascript:

Curren

Answer 1

-- Simplified version --

In my case I needed text to accompany the triangle icon with three rounded corners, however the overflow: hidden; suggested simply did not work because the text was ultimately rendered hidden.

End Result: ...Demo: https://jsfiddle.net/allenski/7p4tbznr/

I was able to achieve similar mask by using clip-path. Note: does not work in IE; however most already stopped supporting IE, especially since Microsoft did. Works great in their new Edge browser.

HTML:

<span class="warning">
    Mandatory
</span>

CSS:

.warning {
    position: relative;
    display: inline-block;
    font-weight: bold;
    color: #FF5500;
}
.warning:before {
    position: absolute;
    top: 50%;
    right: 12px;
    font-size: 18px;
    font-weight: bold;
    color: #FFFFFF;
    transform: translateY(-36%);
    text-shadow: 0 0 7px #111111;
    z-index: 1;
    content: '!';
}
.warning:after {
    display: inline-block;
    margin-left: 3px;
    font-size: 5px;
    border: solid 3em transparent;
    border-top-width: 0;
    border-bottom-width: 5em;
    border-bottom-color: #FF5500;
    clip-path: circle(54% at 50% 69%);
    vertical-align: bottom;
    content: '';
}

In the CSS, the triangle is the :after pseudo-element.