Diagonal Shapes with CSS

Question

What is the best way to create a diagonal shape like this with pure CSS maybe only using :after and :before pseudo elements on the content div? Thanks.

Please come with proper question including your trying code in which you are facing problem as SO is here to help but not to give you readymade code. — Leo the lion, Sep 02 '16 at 07:57
Maybe you can go through web templates that offer similar layouts. — S.Dan, Sep 02 '16 at 07:59
[This](https://css-tricks.com/snippets/css/css-triangle/) could be a good start — Denis Sheremet, Sep 02 '16 at 08:24

James Morgan · Answer 1 · 2016-09-02T08:43:04.210

One way is to set a background on a container and rotate with a CSS transform.

Here's a simple example, use as many overlapping containers as needed:

body {
    margin: 0;
    overflow-x: hidden;
    font-family: monospace;
    color: #fff;
}
.container {
    width: 110vw;
    margin-top:10vh;
    margin-left: -10vw;
    padding-left: 10vw;
    background: red;
    box-shadow: 0 0 15px rgba(0, 0, 0, .33);
    transform: rotate(-5deg);
}
.container-inner {
    padding: 10vw;
    max-width: 80vw;
    transform: rotate(5deg);
}
h1 {
   margin-left: 10%;
   padding-top: 50px;
}

<div class="container">
    <h1>Diagonal Background</h1>
    <div class="container-inner">
        <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis.
       </p>
   </div>
</div>

score 1 · Answer 2 · answered Sep 02 '16 at 08:09

maybe it:

.content {
  position: relative;
  perspective: 100vw;
  padding: 30px;
}

.content::before {
    content: '';
    position: absolute;
    z-index: -1;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    width: 130%;
    background: tomato;
    transform-origin: 100% 50%;
    transform: translate(-25%) rotateY(-20deg);
    outline: 1px solid transparent;
}

<div class="content">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae, laudantium.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate voluptatum recusandae quos soluta impedit! Deleniti facere enim, quia ut quisquam.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deleniti eligendi dignissimos adipisci voluptatem voluptate ex maiores consequuntur, cum ducimus voluptatum, ratione similique asperiores reiciendis, odit quis sed. Reprehenderit doloribus, delectus.
</div>

Diagonal Shapes with CSS

2 Answers2