CSS transparent border shapes

CSS transparent border shapes

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.


<!DOCTYPE html>

<html lang="en">
<meta charset="utf-8">
<title> CSS Shapes</title>


body {
#container {
padding-top: 30px;

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);


<div id="container">

<h1> Important !<span class="arrow"></span> </h1>