Верстка сетки из ромбов с изображениями

Верстка сетки из ромбов с изображениями

Постер - Верстка сетки из ромбов с изображениями

Стала перед нами задача верстки страницы для сайта, где сетка на которой изображения представляются в виде ромбов с ссылками.

Пример верстки сетки из ромбов

Пример как сверстать сетку на HTML, CSS из ромбов с ссылками и изображениями:

Файл index.html:

<!doctype html>
<html lang="ru">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Верстка сетки из ромбов с изображениями</title>
    <link rel="stylesheet" type="text/css" href="css/style.css" />
    <!--[if lt IE 9]>
    <style>
    .grid .cell{
        margin:-20px 35px 40px 35px;
    }
    </style>
    <![endif]-->
</head>
<body>
<div class="grid">
    <a class="cell" style="background:url(img/1.png)" href="#"><span>Тут пишем какой-то текст</span></a>
    <a class="cell" style="background:url(img/2.png)" href="#"><span>Тут пишем какой-то текст</span></a>
    <a class="cell" style="background:url(img/3.png)" href="#"><span>Тут пишем какой-то текст</span></a>
    <a class="cell" style="background:url(img/4.png)" href="#"><span>Тут пишем какой-то текст</span></a>
    <a class="cell" style="background:url(img/5.png)" href="#"><span>Тут пишем какой-то текст</span></a>
    <a class="cell" style="background:url(img/6.png)" href="#"><span>Тут пишем какой-то текст</span></a>
    <a class="cell" style="background:url(img/7.png)" href="#"><span>Тут пишем какой-то текст</span></a>
    <a class="cell" style="background:url(img/8.png)" href="#"><span>Тут пишем какой-то текст</span></a>
    <a class="cell" style="background:url(img/9.png)" href="#"><span>Тут пишем какой-то текст</span></a>
    <a class="cell" style="background:url(img/10.png)" href="#"><span>Тут пишем какой-то текст</span></a>
    <a class="cell" style="background:url(img/1.png)" href="#"><span>Тут пишем какой-то текст</span></a>
    <a class="cell" style="background:url(img/2.png)" href="#"><span>Тут пишем какой-то текст</span></a>
    <a class="cell" style="background:url(img/3.png)" href="#"><span>Тут пишем какой-то текст</span></a>
    <a class="cell" style="background:url(img/4.png)" href="#"><span>Тут пишем какой-то текст</span></a>
    <a class="cell" style="background:url(img/5.png)" href="#"><span>Тут пишем какой-то текст</span></a>
    <a class="cell" style="background:url(img/6.png)" href="#"><span>Тут пишем какой-то текст</span></a>
    <a class="cell" style="background:url(img/7.png)" href="#"><span>Тут пишем какой-то текст</span></a>
    <a class="cell" style="background:url(img/8.png)" href="#"><span>Тут пишем какой-то текст</span></a>
    <a class="cell" style="background:url(img/9.png)" href="#"><span>Тут пишем какой-то текст</span></a>
    <a class="cell" style="background:url(img/10.png)" href="#"><span>Тут пишем какой-то текст</span></a>
</div>
</body>
</html>

Файл css/style.css:

.grid{
    width:844px;
    padding:100px 0 0;
    margin:0 auto;
}
.grid .cell{
    float:left;
    width:141px;
    height:141px;
    text-indent:-9999px;
    -moz-transform:rotate(45deg);
    -ms-transform:rotate(45deg);
    -webkit-transform:rotate(45deg);
    -o-transform:rotate(45deg)
    transform:rotate(45deg);
    position:relative;
    margin:-17px 35px;
    overflow:hidden;
    -webkit-border-radius:20px;
    -moz-border-radius:20px;
    border-radius:20px;
}
.grid .cell span{
    width:200px;
    height:200px;
    -moz-transform:rotate(-45deg);
    -ms-transform:rotate(-45deg);
    -webkit-transform:rotate(-45deg);
    -o-transform:rotate(-45deg)
    transform:rotate(-45deg);
    position:absolute;
    top:-29px;
    left:-29px;
    background:inherit;
}
.grid .cell:nth-child(7n-2){
    margin-left:140px;
}

Для IE версий 8 и ниже ромбов не будет, но элементы будут отображаться нормально:

Читайте также  Многоуровневое выпадающее меню JQuery, CSS

Вид верстки сетки из ромбов в IE8

Пример: http://codepen.io/belka/pen/Alckx

Многоуровневое выпадающее горизонтальное меню на C... Пример верстки многоуровневого выпадающего горизонтального меню на CSS, без JavaScript. Поддержка всех современных браузеров (IE7+). Код html: ...
Простое выпадающее горизонтальное меню на CSS... Пример реализации простого выпадающего горизонтального меню на CSS, без JavaScript. Поддержка всех современных браузеров (IE7+).Код html: П...
Кириллица veranda и roboto шрифт. font-family: Verdana, Geneva, sans-serif; font: normal 13px Roboto,arial,sans-serif;
CSS Styling Radio Button and Checkboxes The idea is simple. We want to change the look and feel of existing radio buttons into more of a push button. The above image pretty much t...

Сохрани, чтобы не потерять