CSS Only Warning Sign

dabblet.css

@charset "UTF-8"
@import url(http://fonts.googleapis.com/css?family=Droid+Sans|Droid+Sans+Mono);

/** 
 * CSS Only Warning Sign
 * 
 * In an attempt to create this effect utilizing the Unicode "Warning Sign" character
 * I quickly ran into trouble trying to get things cross-browser compatible. Something
 * else that bothered me was the fact that there was no way to change the look of the
 * sign, as that was implemented in the used font. In this attempt, the exclamation mark
 * is an actual exclamation mark and the sign effect is created by positioning two 
 * CSS-border-triangles over eachother, a smaller one over a larger one.
 *
 * If you hover over the sign, the outline of each individual component will light up.
 *
 * @see: http://dabblet.com/gist/6981659
 */
.⚠ {
    position: relative; /* So we can position the content as absolute */

    /* Using the borders to create a triangle  */
    border-left: 1em solid transparent;
    border-right: 1em solid transparent;
    border-bottom: 1.732em solid black;

    top: -1em;          /* Correction because of the CSS Triangle trick*/
}
    .⚠::before {
    	position: absolute;
    	content: " ";
	    /* Using the borders to create a triangle  */
	    border-left: 0.8em solid transparent;
	    border-right: 0.8em solid transparent;
	    border-bottom: 1.4722em solid yellow;
	    top: 1.275em;
	    left: -0.8em;
    }
    .⚠::after {
        content: "!";
        position: absolute;
        
        /* 	Position the character over the triangle
         *	These values depend very much on the font used. 
         */
		font-family: "Droid Sans";        
        top: 0.87em; /* top of the yellow triangle */
        left: -0.54em;

        font-size: 1.4722em;
        color: black;
        height: 0.99em;
        width: 1.077em;
    }
    
    
/* Additional style to show how its done */
	.⚠:hover {
		outline: 1px solid;
    	transform: skew(-20deg, -10deg);
    	border-left-color: rgba(0, 0, 0, 0.5);
    	border-right-color: rgba(0, 0, 0, 0.5);
	}
	
    .⚠:hover::before {
		outline: 1px solid yellow;
    	border-left-color: rgba(255, 255, 0, 0.5);
    	border-right-color: rgba(255, 255, 0, 0.5);
	}
	
    .⚠:hover::after {
		outline: 1px solid;
	}
	

/* Additional style to tart up the page */
html {
	display: table;
	width: 100%;
	min-height: 80%;
}
body {
 	display: table-cell;
	vertical-align: middle;
    background: rgb(205,205,0);
    background: linear-gradient(90deg, rgb(125,125,0), rgb(205,205,0));
    min-height: 80%;
    text-align: center;
}

span {
	font-size: 1000%;
}

/*EOF*/

dabblet.html

<span class="⚠"></span>

dabblet.js

// alert('Hello world!');

settings.json

{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"result"}