Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

CSS

Jack Spangenberg
Jack Spangenberg
643 Points

CSS skew looks weird.

I have this workspace, https://w.trhou.se/31rqa7n17j I want the line to be white with no color cutoffs and the black continues all the way down the crevis created, how do I fix it?

4 Answers

Martin Jones
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Martin Jones
Front End Web Development Techdegree Graduate 43,232 Points

I believe you just need to update the CSS to that below, making the container relative will allow the white line to be positioned as you wish.

.jumbotron-1 {
    background-color: black;
    margin-top: 0;
    margin-bottom: 0;
    position: relative;
}

An absolute element will work it's way up the parent containers looking for the next relative element to figure out where it should be positioned. In this case, it is picking up the body element and that's why it appears at the very bottom of the screen.

Hope this helps.

Jack Spangenberg
Jack Spangenberg
643 Points

How do I make it so the black part goes all the way down on the left side so the line isnt going straight through the blue part.

Jack Spangenberg
Jack Spangenberg
643 Points

Look at the page, On the left side the white line cuts into the blue jumbotron.

I want the black jumbotron's color to come down all the way so the triangle shape created by the skew angle is filled with black.

Martin Jones
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Martin Jones
Front End Web Development Techdegree Graduate 43,232 Points

So make the white line a thick black line, like below?:

.jumbotron-1::after }
content: '';
display: block;
width: 100%;
height: 100px; // adjust height to suit
position: absolute;
transform: skewY(-2deg);
background-color: #000; // adjust color to suit
bottom: -50px; //should be equal to half of whatever the height is set at 
}
Jack Spangenberg
Jack Spangenberg
643 Points

http://prntscr.com/g1mt70

I want to get rid of the blue space above the line and make it black space.

Jack Spangenberg
Jack Spangenberg
643 Points

Sorry! It worked. I forgot the height of 100px.

One more thing, I tried to duplicate the process and it messes up on a lower element. Check the workspace link in the OP, the error shows.