How can I make a div with irregular shapes with css3 and html5?

by

What you have there looks like a grid, which you can obtain either with many gradients on a div, either with a grid of many divs on which you apply CSS transforms.

div { box-sizing: border-box; }
.container {
    overflow: hidden;
    width: 32em;
    height: 32em;
    margin: 5.6em auto 0;
    background: silver;
}
.grid {
    transform: skewX(-45deg) 
        rotate(15deg) 
        scaleX(1.785) scaleY(.8)
        translateX(-4.5em) translateY(-3em);
}
.grid-row {
    width: 32em;
    height: 2em;
}
.grid-cell {
    float: left;
    width: 2em;
    height: 2em;
}
.high {
    background: gainsboro;
}
.high:hover {
    background: whitesmoke;
}
<div class="container">
    <div class="grid">
        <div class="grid-row">
            <div class="grid-cell"></div>
            <div class="grid-cell high"></div>
        </div>
        <div class="grid-row">
            <div class="grid-cell"></div>
            <div class="grid-cell high"></div>
        </div>
    </div>
</div>
<!-- and so on... -->

Leave a Comment

tech