How do I achieve a slanted right-edge div?

Question

I have been searching for a few days now for code to make the right edge of a div slant 45 degrees. Here is an image example of what I am particularly attempting to get...

There seems to be a lot of examples of 'slanted-edge' divs, but I can't find any with the particular right-side slanted.

I have spend a great deal of time trying to alter the codes of the others, but it ends up in a mess.

This is the original CSS code I was experimenting with to get the results I need...

    div {
        position: relative;
        display: inline-block;
        padding: 1em 5em 1em 1em;
        overflow: hidden;
        color: #fff;
    }

    div:after {
        content: '';
        position: absolute;
        top: 0; left: 0;
        width: 100%; height: 100%;
        background: #000;
        -webkit-transform-origin: 100% 0;
        -ms-transform-origin: 100% 0;
        transform-origin: 100% 0;
        -webkit-transform: skew(-45deg);
        -ms-transform: skew(-45deg);
        transform: skew(-45deg);
        z-index: -1;
    }

    body {
        background:
        url('https://farm3.staticflickr.com/2878/10944255073_973d2cd25c.jpg');
        background-size: cover;
    }

Here is the HTML....

    <div>Slanted div text</div>
    <div>
        Slanted div text<br/>
        on several lines<br/>
        Another line
    </div>
    <div>Wider slanted div text with more text inside</div>

You would need to combine 2 or 3 divs, the inside one having a negative right offset and rotated via something like `transform: rotate(45deg)` — Keith M, Jun 22 '17 at 23:36
Keith... I was I understood 'offsets' enough to experiment with your suggestion. — Jamie Sexton, Jun 22 '17 at 23:38

score 4 · Accepted Answer · answered Jun 22 '17 at 23:57

4

Create your div, then overlay an absolutely-positioned, rotated pseudo-element to create the slanted impression.

div {
  height: 50px;
  width: 300px;
  background-color: black;
  position: relative;
  overflow: hidden;
}

div:after {
  height: 100%;
  width: 100%;
  background-color: white;
  position: absolute;
  content: "";
  transform: rotate(45deg);
  transform-origin: bottom right;
}

<div></div>

answered Jun 22 '17 at 23:57

Michael Benjamin

346,931
104
581
701

1

Awesome! Thank you! – Jamie Sexton Jun 23 '17 at 00:38
I do have another question though Michael... how would I go about putting text in the div without the whole thing falling apart? – Jamie Sexton Jun 23 '17 at 05:13
1

I'm not sure what you're trying to accomplish (e.g., simple text, long text, a banner sign, a long paragraph, etc.). But here's one method that may work for you: https://jsfiddle.net/q1gnpea7/ – Michael Benjamin Jun 23 '17 at 12:14
1

Thanks, I got it t work by overlapping the divs and using z-index -1. – Jamie Sexton Jun 25 '17 at 01:07
Is it possible to make this technique work (or other way) e.g. when `body` has `background-image` (without setting background for `:after`)? Original OP's code is having image in his `body`. – Vadim Ovchinnikov Jul 12 '17 at 04:03

How do I achieve a slanted right-edge div?

1 Answers1

Linked