How to skew a div with css? [duplicate]

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

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

1 answer

2

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>
    
answered by 19.12.2018 в 13:44