How to skew a div with css? [duplicate]

Question

How to skew a div with css? [duplicate]

Navigation

#1 by (2 votes)

0

I want to skew a div so that it remains as in the image. And I have no absolute idea to do it. Thank you very much in advance.

header{
    width: 100%;
    height: 60px;
    background-color: #76cad4;
    box-shadow:2px 2px 5px grey;  
}
.fondo-img{
    width: 20%;
    height: 100%;
    background-color: #f5f5f5;
    
}

<header>
        <div class="fondo-img"><img src="img/logo-stucom.png"></div>
    </header>

Image

html css

asked by Pablo Peral Magaña 19.12.2018 в 12:35

source

1 answer

Create a query view How to round a decimal value and display 0.50 instead of 0.5 in php

score 2 · Answer 1

Instead of bias I give you an alternative solution: use a linear gradient like this:

header{
    width: 100%;
    height: 60px;
    background-image: 
  linear-gradient(135deg, #f5f5f5 0%, #f5f5f5 50%, #76cad4 50%, #76cad4 100%);
    box-shadow:2px 2px 5px grey;  
}
.fondo-img{
    width: 20%;
    height: 100%;
    background-color: #f5f5f5;    
}

<header>
<div class="fondo-img"><img src="img/logo-stucom.png"></div>
</header>