Quick Tip: Practical CSS Shapes
Tutorial Details
- Topic: CSS
- Difficulty: Intermediate
- Estimated Completion Time: 4 Minutes
A common design technique lately is to create a fold effect, where it appears as if a heading is wrapping behind its container. This is generally achieved through the use of tiny images; however, with CSS, we can mimic this effect quite easily. I’ll show you how in four minutes.

Final HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CSS Shapes</title>
<!--[if IE]>
<style>
.arrow { top: 100%; }
</style>
<![endif]-->
</head>
<body>
<div id="container">
<h1> My Heading <span class="arrow"></span> </h1>
</div>
</body>
</html>
Final CSS
#container {
background: #666;
margin: auto;
width: 500px;
height: 700px;
padding-top: 30px;
font-family: helvetica, arial, sans-serif;
}
h1 {
background: #e3e3e3;
background: -moz-linear-gradient(top, #e3e3e3, #c8c8c8);
background: -webkit-gradient(linear, left top, left bottom, from(#e3e3e3), to(#c8c8c8));
padding: 10px 20px;
margin-left: -20px;
margin-top: 0;
position: relative;
width: 70%;
-moz-box-shadow: 1px 1px 3px #292929;
-webkit-box-shadow: 1px 1px 3px #292929;
box-shadow: 1px 1px 3px #292929;
color: #454545;
text-shadow: 0 1px 0 white;
}
.arrow {
width: 0; height: 0;
line-height: 0;
border-left: 20px solid transparent;
border-top: 10px solid #c8c8c8;
top: 104%;
left: 0;
position: absolute;
}
Note: Want to add some source code? Type <pre><code> before it and </code></pre> after it. Find out more
- http://drake09.deviantart.comq C0de(
- http://de.fotolia.com/p/206566/partner/206566 Koka Koala
- http://www.joomlabucket.com Matic
- Khalil
- http://ljtyson.tumblr.com/ Lj
- http://www.scottcorgan.com Scott Corgan
- http://miketaylr.com Mike Taylor
- http://www.tastybytes.net Brian
- Erik
- http://www.deluxeblogtips.com Rilwis
- CodeDude
- http://www.alexpica.com Alex P
- http://www.giulianoliker.com Giuliano
- Daniel S
- KF
- http://www.codegeek.net Ron
- http://zubeta.com/beta 9swords
- http://Altramax.com Dylan Opet
- http://newleafinternet.com Ben
- Olle
- dave
- Aaron
- http://code621.com Dan
- http://www.codealamode.net Tessa
- Damion
- edanTal
- Craig
- http://warungmobil.com/ iqranegara
- http://www.cbesslabs.com Bratu Sebastian
- http://www.jsxtech.com Jaspal Singh
- http://jorgefernandezonline.com Jorge Fernandez
- http://cheekymonkeymedia.ca Rick
- chetan
- chetan
- risetothesky
- CorvosKK
- http://php.quicoto.com quicoto
- Ferdinand AMOI
- http://twitter.com/stephenfrank stephenfrank
- http://fatal-exception.co.uk dVyper
- http://www.fl3x.be Remmelt
- http://www.sideshow-systems.de Flo
- http://www.designfromwithin.com ThaClown
- http://www.derekkirk.com Derek
- http://stetro.wordpress.com stetro
- http://www.bertrandLirette.com Bertrand
- Josh
- http://spicydesign.ca Alex ElChehimi
- jmarreros
- http://tutorijali.hdonweb.com/ Tutorijali HDonWEB
- Felix
