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;
}
Enjoyed this Post?
Subscribe to our RSS Feed, Follow us on Twitter or simply recommend us to friends and colleagues!
By Jeffrey Way
Getting Good with JavaScript
Learn how to liven up your webpages, from start to finish. Veteran Nettuts+ author Andrew Burgess helps you Get Good with JavaScript.
Join our newsletter!
UberMenu - WordPress Mega Me ... only $16.00 
RoyalSlider – Touch-Enable ... only $12.00 
Kult House - More
Web Basix
Just getting started? Start with our basix tutorials on the fundamentals. View All Basix Tutorials
Create a Tutorial, Get Paid!
Have something to teach the world? Want to earn money doing it? Tutorials, screencasts, and articles published here on Nettuts+ are largely contributed by readers just like you! We'll pay you great money for good content. Find Out More
thank you very much jeff, youre the best in css
nice tutorial!
but i have a question!
if i want the “.arrow” class on the right side of the header to, how do i do?
/ kim
If you want the arrow on the right side, change
.arrow {
width: 0; height: 0;
line-height: 0;
border-left: 20px solid transparent;
border-top: 10px solid #c8c8c8;
top: 104%;
left: 0;
position: absolute;
}
with:
.arrow {
width: 0; height: 0;
line-height: 0;
border-right: 20px solid transparent;
border-top: 10px solid #c8c8c8;
top: 104%;
right: 0;
position: absolute;
}
Thanks for the hard work. love it
Wow you are kind of a css stud, I can’t believe you did it that fast….I learned so much.
Nice tut on PSD TO HTML keep it up.
If you want to set the H1 with some Opacity how do you make it so that the text has no opacity.
I know how to do this with divs by setting a parent and child and setting the position:relativve, but how would you do this with and h1?
Can we make this possible without using blank span?
You can use h1:before, something like this:
h1:before{
content: ‘ ‘;
position: relative;
left: …;
top: …;
.
.
/*attributes for the arrow*/
.
}
Very nice. Another note to self….. Get the Edit CSS addon for Firefox. :)
please remove my previous comment (awesome! so much better than using images. thanks for the vid). i don’t want my image showing up on gravatar – sorry about that
Is there any reason the arrow would duplicate itself below and to the right on a CSS layout? I’m a novice at this volunteering for a campaign. Thanks!
Greetings,
I really like ur tutorial. and i apriciate but could you make valid (CSS level 2.1) OR CSS3. IT SHOWS AN ERROR .i hope hearing from u soon . thank u
Thanks for this, works nicely on my site. Also works nicely with CSS PIE. ;)
Than you very nice tutorial..
Nice tutorial !!!
How do make the arrow located at top-right corner ?
I really need to get a subscription to the tuts network. I have been trying to do this on my own and stumbled upon this by accident. You make it look so easy and I thank you for sharing with the world. Freelancers like me appreciate this so much ^_^