Divide diagonal mosaic in CSS

Question

I need to create a menu with diagonal div that when you pass the mause above for color and each image contains a link to a different category.

The problem is that I can’t create a diagonal div, and I wanted to find a solution to the problem just using html and css if possible.

How can I create a mosaic menu like this?

In case just making geometric shapes does not work for me as it has the background image.

I need to distort the size of the Divs to look like the image.

Some people are saying that it is duplicate and even voting against my post, so I will show that the problem is not so simple. The problem is much deeper than the geometric shapes by which in the scheme of border do not make a background image. Just add a background color.

And by the skew you can put a background-image, but I can’t make the images have the right angle, because it distorts both sides of the angle.

#trapezoid { 
  border-top: 200px solid transparent;
  border-left: 0px solid white;
  border-right: 40px solid white;
  width: 150px;
  float: left;

  background-image: url('http://pongnamuroms.weebly.com/uploads/1/3/3/6/13369650/144214_orig.png');
  opacity: 0.7;
  background-size: calc(100% + 100px);
}

#trapezoid2 { 
  border-bottom: 200px solid transparent;
  border-left: 40px solid white;
  border-right: 0px solid white;
  width: 150px;
  margin-left: -34px;
  float: left;

  background-image: url('http://www.androidspin.com/wp-content/uploads/2015/05/flow_aquablue.png');
  opacity: 0.7;
  background-size: calc(100% + 100px);
}

#trapezoid2:hover{
  opacity: 1;
}

#trapezoid:hover{
  opacity: 1;
}

<div id="trapezoid">

</div>
<div id="trapezoid2">
</div>

<div id="trapezoid3">

</div> 

Answer 1

follows an example using SVG

var trapezio1 = document.getElementById("trapezio1");
var trapezio2 = document.getElementById("trapezio2");

trapezio1.addEventListener("click", function () {
  alert("Parque");
});

trapezio2.addEventListener("click", function () {
  alert("Praia");
});

.trapezio {  
  stroke:black;
  stroke-width:1;
  filter:url("#desaturate")
}

#trapezio1 {
  fill:url(#img1);        
}

#trapezio2 {
  fill:url(#img2);
}

.trapezio:hover  {
  filter: none;
  cursor: pointer;
}

<svg viewBox="0 0 455 250" >
  <polygon id="trapezio1" class="trapezio" points="  0,0 250,0 200,250   0,250" />
  <polygon id="trapezio2" class="trapezio" points="255,0 455,0 455,250 205,250" />      
  <defs>
    <pattern id="img1" width="1" height="1">
      <image xlink:href="http://crossorigin.me/http://www.travelandleisure.com/sites/default/files/field/image/local-experts-shanghai-most-beautiful-parks.jpg" 
             width="250" height="250" />
    </pattern>
    <pattern id="img2" width="1" height="1">
      <image xlink:href="http://crossorigin.me/http://www.travelandleisure.com/sites/default/files/field/image/local-experts-bangkok-best-beaches.jpg" 
             width="250" height="250"/>
    </pattern>
  </defs>
  <filter id="desaturate">
    <feColorMatrix type="matrix" 
                   values="0.3333 0.3333 0.3333 0 0
                           0.3333 0.3333 0.3333 0 0
                           0.3333 0.3333 0.3333 0 0
                           0      0      0      1 0"/>
  </filter>
</svg>

Answer 2

You may be interested in the css3 skew method. Let’s say you can "skew" your div according to your preferences:

I have my div:

<div id="divteste">olá mundo</div>

And my style sheet:

div {
    width: 300px;
    height: 100px;
    background-color: yellow;
    border: 1px solid black;
}

div#divteste {
    -ms-transform: skew(20deg,10deg); /* IE 9 */
    -webkit-transform: skew(20deg,10deg); /* Safari */
    transform: skew(20deg,10deg); /* Standard syntax */
}

Example in Jsfiddle: https://jsfiddle.net/sab09dfq/2/

More about the skew method: http://www.w3schools.com/css/css3_2dtransforms.asp

Already change the color when passing the mouse, you want to know more about Hover. It can be done both in css, as in js.

More about the selector Hover: http://www.w3schools.com/cssref/sel_hover.asp