How to impose what is in the picture?

Example

    2 answers 2

    We all learned a little bit someday and somehow

    In general, in steps:

    1) create a wrapper that will hide unnecessary parts.

    2) create a block with the property transform:skew(-25deg) .

    3) rgba allows you to make a background that has transparency in hex from hex .

    and at the output we get this:

     .blocks { width: 140px; height: 40px; overflow: hidden; } .block { width: 150px; height: 40px; background: rgba(48, 87, 123, .9); transform: skew(25deg)translate(-20px, 0); } 
     <div class="blocks"> <div class="block"></div> </div>

    • one
      Good answer, as I forgot about skew .. My example is certainly on crutches "good")) - Arthur
    • one
      it happens - on skew, in general, a lot of tasty things are done - user33274
    • I knew that I would miss something)) - Arthur

    If you don’t need to support IE, it’s better to do it via the clip-path :

     .test{ width: 200px; height: 50px; background: red; clip-path: polygon(0 0, calc(100% - 50px) 0, 100% 100%, 0 100px); } 
     <div class="test"></div>