- By Admin 4.2K views
Hello everyone, today I will share with you one more knowledge that is not superior, but it is beautiful mainly.
HTML:
<div id="container">
<h1>This is my title</h1>
</div>
CSS:
/* Just to align the container */
#container {width: 400px; margin: 30px auto; text-align: center; padding: 100px 0; background: #EEEEEE;}
/* The important bit */
h1 {position: relative;
margin: 0 -25px;
font-size: 40px;
background: #0088AA;
color: #FFFFFF;
text-shadow: 1px 1px 0px #1A5D6E;
box-shadow: 0 0 10px #AAA;
}
h1:before {content: ""; display: block; position: absolute; bottom: -25px; width: 0; height: 0; border-style: solid; border-color: #1A5D6E transparent;border-width: 25px 0 0 25px; left: 0;}
Done.