Question

how can I get a layout like this with css?

 _ _ _ _ _ _ _ _ _ _  _ _
|                        \
|   People                \     link1           link2
|                          \
|_ _ _ _ _ _ _ _  _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _  _ _ _
|                                                               |
|                content                                        |
|                                                               |
|_ _ _ __ _ __ _ _ _ _ _ _ _  __ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _| 

Answer 1

The only challenge here is People. You can do it by putting this in a class called like “people_slanted” or something like that:

border-bottom: 100px solid red;
border-left: 0 solid transparent;
border-right: 50px solid transparent;
height: 0;
width: 150px;

That code above i stole/modified from: http://css-tricks.com/examples/ShapesOfCSS/
(Be sure to check for browser compatibility)

You mentioned you are using a table in your follow up comment. One easy way might be to create a basic class for this slant then wrap up your table’s top left cell (the one that’s supposed to be slanted) in a div/span with the class “people_slanted” or whatever you name it.