Learn how to make an arrow to a tab using borders.This is generally achieved through the use of tiny images however, with CSS, we can make this effect quite easily.
Transparent Borders
Setting the border color to transparent , we can hide a little border portion to create new practical css shapes.
BASIC HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title> CSS Shapes</title>
<style>
body {
background-color:#00B2EE;
}
#container {
padding-top: 30px;
font-family:serif;
padding-left:300px;
}
h1 {
background: #999222;
background: -moz-linear-gradient(top, #e3e3e3, #c8c8c8);
border:2px black;border-radius:20px;
background: -webkit-gradient(
linear, left top, left bottom, from(#BABABA),color-stop(50%,#757575), to(#fff));
padding: 30px 0px 30px 50px;
margin-left: 160px;
margin-top: 160px;
position: relative;
width: 25%;
-moz-box-shadow: 1px 1px 3px #292929;
-webkit-box-shadow: 0px -1px 10px #404040;
color: #C7C7C7;
text-shadow: 0 1px 4px #262626;font-size:41px;
}
.arrow {
width: 0; height: 0;
line-height: 0;
border-right: 60px solid transparent;
border-top: 30px solid #fff;
top: 109%;
left: 22px;
position: absolute;-webkit-transform:rotate(72deg);
}
</style>
</head>
<body>
<div id="container">
<h1> Important !<span class="arrow"></span> </h1>
</div>
</body>
</html>
