css‎ > ‎

Exclamation mark in a yellow triangle

posted Sep 21, 2017, 4:30 AM by Chris Franklin   [ updated Sep 21, 2017, 4:30 AM ]
  • No javascript or images

css

.exclamation {
 position: relative;
 top: -10px;
}

.exclamation_mark {
 position: absolute;
 border-left: 14px solid transparent;
 border-right: 14px solid transparent;
 border-bottom: 22px solid #FFFF00;
 top: 0px;
 left: 0px;
}


.exclamation_mark::after {
 content: "!";
 position: absolute;
 font-size: 20px;
 color: red;
 top: 2px;
 left: -3px;
 font-weight: bold;
}

html

<div class="exclamation">
 <div class="exclamation_mark"></div>
</div>


Comments