Triangle with 3 rounded corners using CSS only + text.

Warning icon with text using only one span or div. Created without using images or SVGs.

by Allen N.

HTML

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

SCSS

html, 
body {
    background: #010101;
    font-family: Helvetica, Arial;
}
.warning {
    position: relative;
    display: inline-block;
    font-weight: bold;
    color: #FF5500;

    &: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: '!';
    }
    &: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: '';
    }
}