How we create a CSS notice alert in new design

Is it possible to create like [this alert][1] in CSS? I seen this alert in my cPanel dashboard. Where I also try to view Css of that code when I try to view it recut to login page. I couldn't done.

Solution

as simple as this :

i have added FontAwesome for icon test. you can font icon list Here

to find the related icon code for .alert:before content click on the icon in the list and copy the unicode text.

dont forget to put a backslash before the unicode in content.

.alert {
    max-width: 550px;
    position:  relative;
    padding: 10px 20px 10px 10px;
    margin:  10px auto;
    border-radius: 3px;
    background-color: #faf8df;
    border: 2px solid #f5c340;
    border-left-width: 40px;
}
.alert:before {
    content: '\f071';
    font-family: "FontAwesome";
    position: absolute;
    left: -27px;
    top: 50%;
    transform: translateY(-50%);
    color: #fff;
}
.alert .close {
    position:  absolute;
    right: 8px;
    cursor:  pointer;
    top: 10px;
    color: #999;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">

<div class="alert">
    <b>Warning:</b> this is the text you want to show as a warning message.
    <span class="close">&times;</span>
</div>