Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by amadeo brands
amadeo brands
15,375 Points

CSS Hero question

I have a question ... the one that can solve it is a CSS hero. We need a complex CSS Shape to be formed. But I can get it fixed help needed :O

We need to have a shape like this: http://artsire.com/shape.png See here our dev server: dev.illuminz.com/illuminz-html/artsitre/preorder.php

I am totally stock :O :( Any help? All also needs to be responsive.

2 Answers

Erwin Meesters
Erwin Meesters
15,088 Points
Erwin Meesters
Erwin Meesters
15,088 Points

Maybe this will be a good start:

html:

<div id="wrapper">
    <div class="overlay-left"></div>
    <div class="overlay-right"></div>
    <img src="http://placehold.it/800x600">
</div>

css:

#wrapper {
    width: 100%;
    height: 75%;
    overflow: hidden;
    position: relative;
}
#wrapper img {
    width: 100%;
}
#wrapper .overlay-left, #wrapper .overlay-right {
    position: absolute;
    bottom: 0;    
    height: 25%;
    width: 50%;
}
#wrapper .overlay-left {
   left: 0;
    background: linear-gradient(20deg, #fff 50%, transparent 0);
}
#wrapper .overlay-right {
    left: 50%;
    background: linear-gradient(-20deg, #fff 50%, transparent 0);
}
amadeo brands
amadeo brands
15,375 Points

Heyy Erwin, Thank you for your question. But things don't seem to be working.

Strange any fix? I will check it later on.

unsubscribed User
unsubscribed User
8,639 Points
unsubscribed User
unsubscribed User
8,639 Points

Here's a resource to help you, https://css-tricks.com/examples/ShapesOfCSS/. I'm sure combining some of these techniques will allow you to form the desired shapes in CSS.

Go down to the title "Chevron." It's the closest shape to your webpage I believe.