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

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

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

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

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

Пример как сверстать сетку на 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 и ниже ромбов не будет, но элементы будут отображаться нормально:

Читайте также  Ещё 50 лучших бесплатных кириллических шрифтов для дизайна II

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

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

Многоуровневое выпадающее горизонтальное меню на C... Пример верстки многоуровневого выпадающего горизонтального меню на CSS, без JavaScript. Поддержка всех современных браузеров (IE7+). Код html: ...
Выпадающее горизонтальное меню с задержкой на CSS... Пример реализации выпадающего горизонтального меню с задержкой на CSS, без JavaScript. Показанное нами ранее Простое выпадающее горизонтальное ме...
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...
Простое выпадающее горизонтальное меню на CSS... Пример реализации простого выпадающего горизонтального меню на CSS, без JavaScript. Поддержка всех современных браузеров (IE7+).Код html: П...

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