-5

I want to create div with a diagonal side as shown in the image below: Example of the desired outcome

I would like to know what the best approach is. What I can think of now is to place 2 divs near each other and rotate one div. I could also work with a background image, but I'm wondering what's the bes way.

Any information/links/tutorials is really appreciated

Jules
  • 546
  • 2
  • 11
  • 36
  • 1
    where is your code??? – Bhargav Chudasama Apr 05 '18 at 07:56
  • I would use a background-image. Just for the sake of simplicity. – Red Apr 05 '18 at 07:57
  • maybe you can try using this approach here: https://css-tricks.com/notched-boxes/ or something from here: https://css-tricks.com/scooped-corners-in-2018/ – cloned Apr 05 '18 at 07:57
  • @Bhargav Until now I have no code, because I want to know what generally is the best approach to this – Jules Apr 05 '18 at 07:58
  • The best approach is to use [pseudo selectors](https://www.w3schools.com/css/css_pseudo_elements.asp). – Patrick Mlr Apr 05 '18 at 07:59
  • 2
    Anyway, SO is for asking help to resolve problems with your code. Not for asking *links and/or tutorials*. You question will now most likely get anwsers which are very opinion based. – Red Apr 05 '18 at 07:59

1 Answers1

2

You can use :before pseudo element for that:

*{
  box-sizing:border-box;
  padding:0;
  margin:0;
}
div{
    padding:0 10px 10px;
    background:lime;
}
h1{
    margin:0;
    display:inline-block;
    position:relative;
    z-index:1;
    padding:10px 50px 10px;
    overflow:hidden;
}
h1:before{
    content:'';
    width:100%; 
    height:100%;
    position:absolute;
    top:0; 
    left:0;
    background:#fff;
    z-index:-1;
    transform: skewX(-20deg);
    transform-origin:0 0;
}
<div>
    <h1>demo 123</h1>
</div>
aMJay
  • 2,215
  • 6
  • 22
  • 34