create this shape using CSS3

Question

I would like to create this shape using just css. I am pretty sure this can be done. But i am having trouble with gradients involved.

This shape will contain some text inside. Suggested html markup is:

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

Shape to be created

A jsFiddle would be highly appreciated.
Thanks in advance.

What have you tried? How can you expect to draw an irregular shape like this, purely in CSS with no images? — Alex W
– Alex W, Commented Jul 6, 2012 at 15:15
it's that irregular if you see. i can be thought of as two rectangles. The big one is obvious. the smaller one at right top with with half the diagonal being transparent. just wondering if there is any technique i can follow to write the css for that. — Saurabh Kumar
– Saurabh Kumar, Commented Jul 6, 2012 at 15:20

Community · Accepted Answer · 2017-05-23 10:29:39Z

9

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

CSS: (From the fiddle 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;
}

edited May 23, 2017 at 10:29

CommunityBot

11 silver badge

answered Jul 6, 2012 at 15:29

zen

1,1853 gold badges30 silver badges56 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Saurabh Kumar Over a year ago

i couldn;t figure out where to place the content. i should be able to place some content like <p> inside.

zen Over a year ago

You could place content in the main div. And add some padding to it too. like so jsfiddle.net/HshfF/2

Saurabh Kumar Over a year ago

thanks...!! just eager to know do you think this can also be achieved using pseudo elements.'

zen Over a year ago

Yep should be able to do it with using just :before

zen Over a year ago

Here it is with using just pseudo elements, before and after. jsfiddle.net/HshfF/3

abhijit · Accepted Answer · 2012-07-06 15:16:25Z

2

Please Learn CSS3, Try Nicholas Gallagher tutorials, he has some of the best css3 tutorials: one you looking for http://nicolasgallagher.com/pure-css-folded-corner-effect/demo/

The drop shadow and colors you looking for i think you need to do it yourself.

answered Jul 6, 2012 at 15:16

abhijit

1,9683 gold badges28 silver badges39 bronze badges

1 Comment

Saurabh Kumar Over a year ago

thanks... Let me go through 'em. colors obviously not of the big problem.

Grezzo · Accepted Answer · 2012-07-06 15:53:13Z

0

Nearly there with this: http://jsfiddle.net/Grezzo/52zG7/

You only need one div (thanks to pseudo element), but I haven't "cut" the corner yet.

edited Jul 6, 2012 at 15:53

answered Jul 6, 2012 at 15:46

Grezzo

2,2732 gold badges22 silver badges41 bronze badges

Collectives™ on Stack Overflow

create this shape using CSS3

3 Answers 3

5 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

5 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related