Geek Answers Handbook

Create this form using CSS3

I would like to create this form using only css. I am sure that this can be done. But I have problems with gradients.

This form will contain the text inside. Recommended html markup:

<div class="container"> ... more html contents... </div>

Shape to be created

A jsFiddle would be much appreciated. Thanks in advance.

+4
source share
3 answers

Try this, http://jsfiddle.net/HshfF/1/

CSS: (From a script in this comment )

 .main { background: -moz-linear-gradient(top, #ffffff 0%, #e8e8e8 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#e8e8e8)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #ffffff 0%,#e8e8e8 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #ffffff 0%,#e8e8e8 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #ffffff 0%,#e8e8e8 100%); /* IE10+ */ background: linear-gradient(to bottom, #ffffff 0%,#e8e8e8 100%); /* W3C */ position: relative; width: 150px; height: 100px; margin: 10px; border: 1px solid #d0d0d0; border-radius: 10px; padding: 20px; } .main:before { content: ''; display: block; top: -1px; right: -1px; width: 20px; height: 20px; background: -moz-linear-gradient(top, #ffffff 0%, #e8e8e8 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#e8e8e8)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #ffffff 0%,#e8e8e8 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #ffffff 0%,#e8e8e8 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #ffffff 0%,#e8e8e8 100%); /* IE10+ */ background: linear-gradient(to bottom, #ffffff 0%,#e8e8e8 100%); /* W3C */ position: absolute; border-radius: 0 0 0 5px; border-left: 1px solid #d0d0d0; border-bottom: 1px solid #d0d0d0; } .main:after { content: ''; display: block; position: absolute; top: -1px; right: -1px; border-top: 20px solid #fff; border-left: 20px solid transparent; }
+9
source

Please learn CSS3, try the Nicholas Gallagher tutorials, it has some of the best css3 lessons: the one you are looking for is http://nicolasgallagher.com/pure-css-folded-corner-effect/demo/

The shadow and colors you are looking for, I think you need to do it yourself.

+2
source

Almost with this: http://jsfiddle.net/Grezzo/52zG7/

You only need one div (thanks to the pseudo-element), but I have not “cut” the corner yet.

0
source

More articles:


All Articles