7

Какое наиболее оптимальное решение для реализации плитки галереи в виде ромбов, как на рисунке ниже, моим решением является два rotate, но тогда приходится задавать отрицательные margin, что-то вроде, но масштаб нужен desktop:

.work-portfolio__items {
    margin: 0 70px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    
}

.work-portfolio__item {
    width: 260px;
    height: 260px;
    margin: -20px;
    overflow: hidden;
    position: relative;
    display: flex;
    align-items: center;
    transform: rotate(45deg);
    background-color: #212121;
    color: #f5f5f5;
    font-size: 15px;
    line-height: 12.5px;
}

.work-portfolio__item::before {
    content: '+';
    font-size: 20px;
    transform: rotate(45deg);
    display: block;
    position: absolute;
    bottom: -9px;
    left: calc(100% - 42px);
    width: 35px;
    height: 35px;
    z-index: 1;
}

.work-portfolio__item::after {
    content: '';
    display: block;
    position: absolute;
    bottom: 0px;
    left: calc(100% - 35px);
    width: 35px;
    height: 35px;
    background-color: #cd2929;
}
<div class="work-portfolio__items">
  <a href="#" class="work-portfolio__item">
      <p>Vinyl record</p>
  </a>
  <a href="#" class="work-portfolio__item">
      <p>3D Wooden Logo</p>
  </a>
  <a href="#" class="work-portfolio__item">
      <p>Hard Cover Book</p>
  </a>
  <a href="#" class="work-portfolio__item">
      <p>macbook-air600</p>
  </a>
  <a href="#" class="work-portfolio__item">
      <p>Silver Stamping</p>
  </a>
  <a href="#" class="work-portfolio__item">
      <p>T-Shirt MockUp</p>
  </a>
  <a href="#" class="work-portfolio__item">
      <p>Fashion Glasses</p>
  </a>
  <a href="#" class="work-portfolio__item">
      <p>picjumbo</p>
  </a>
  <a href="#" class="work-portfolio__item">
      <p>Embossed Leather</p>
  </a>
  <a href="#" class="work-portfolio__item">
      <p>Billboard</p>
  </a>
  <a href="#" class="work-portfolio__item">
      <p>macbook pro</p>
  </a>
  <a href="#" class="work-portfolio__item">
      <p>Vintage Car</p>
  </a>
  <a href="#" class="work-portfolio__item">
      <p>madebyvadim</p>
  </a>
</div>

Галерея

Во втором случае, как лучше сделать, чтобы было 2 цвета у числа при том, что число находится на разных цветовых background? из вариантов в голову приходит: просто вставить картинку, использовать каким-то образом градиент

введите сюда описание изображения

2 ответа 2

7

Вариант clip-path

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-family: 'Segoe UI', sans-serif;
}

.work-portfolio__items {
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    max-width: 600px;
    
}
.work-portfolio__items ul{
    padding: 0;
    text-align: center;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}
.work-portfolio__items ul > li{
    list-style: none;
    width: 50%;
}
.work-portfolio__items ul > li:nth-child(3n + 3){
    width: 100%;
    margin: -120px 0;
}

.work-portfolio__item {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    width: 260px;
    height: 260px;    
    overflow: hidden;
    position: relative;
    background-color: #212121;
    color: #f5f5f5;
    font-size: 15px;
    line-height: 12.5px;
    -webkit-clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
    clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}

.work-portfolio__item::before {
    content: '+';
    font-size: 20px;
    display: block;
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 35px;
    height: 35px;
    line-height: 30px;
    text-align: center;
    margin-left: -17.5px;
    z-index: 1;
    background: #CD2929;
    -webkit-clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
    clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}

@media screen and (max-width: 767px) {
    .work-portfolio__items ul > li:nth-child(3n + 3){
        width: 50%;
        margin: 0;
    }
}
@media screen and (max-width: 640px) {
    .work-portfolio__items ul > li,
    .work-portfolio__items ul > li:nth-child(3n + 3){
        width: 100%;       
    }
}
<div class="work-portfolio__items">
  <ul>
    <li>
      <a href="#" class="work-portfolio__item">
        <p>Vinyl record</p>
      </a>
    </li>
    <li>
      <a href="#" class="work-portfolio__item">
        <p>3D Wooden Logo</p>
      </a>
    </li>
    <li>
      <a href="#" class="work-portfolio__item">
        <p>Hard Cover Book</p>
      </a>
    </li>
    <li>
      <a href="#" class="work-portfolio__item">
        <p>macbook-air600</p>
      </a>
    </li>
    <li>
      <a href="#" class="work-portfolio__item">
        <p>Silver Stamping</p>
      </a>
    </li>
    <li>
      <a href="#" class="work-portfolio__item">
        <p>T-Shirt MockUp</p>
      </a>
    </li>
    <li>
      <a href="#" class="work-portfolio__item">
        <p>Fashion Glasses</p>
      </a>
    </li>
    <li>
      <a href="#" class="work-portfolio__item">
        <p>picjumbo</p>
      </a>
    </li>
    <li>
      <a href="#" class="work-portfolio__item">
        <p>Embossed Leather</p>
      </a>
    </li>
    <li>
      <a href="#" class="work-portfolio__item">
        <p>Billboard</p>
      </a>
    </li>
    <li>
      <a href="#" class="work-portfolio__item">
        <p>macbook pro</p>
      </a>
    </li>
    <li>
      <a href="#" class="work-portfolio__item">
        <p>Vintage Car</p>
      </a>
    </li>
  </ul>
</div>

Цифры

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-family: 'Segoe UI', sans-serif;
}

.rhombs {
    display: flex;
    flex-wrap: wrap;
}

.rhomb {
    width: 150px;
    height: 150px;
    margin: 25px auto;
    position: relative;
    overflow: hidden;
    background: #CD2929;
    -webkit-clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
    clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}

.rhomb:before {
    content: '';
    position: absolute;
    top: 1px;
    left: 1px;
    bottom: 1px;
    right: 1px;
    background: #F5F5F5;
    -webkit-clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
    clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}

.rhomb__inner {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 50%;
    background: #CD2929;
    overflow: hidden;
}

.rhomb__number {
    position: absolute;
    top: 50%;
    left: 50%;
    font-size: 50px;
    font-weight: 700;
    color: #CD2929;
    transform: translate(-50%, -50%);
}
.rhomb__number--2 {
    color: #fff;
    top: 0;
}
<div class="rhombs">
    <div class="rhomb">
        <div class="rhomb__number">62</div>
        <div class="rhomb__inner">
            <div class="rhomb__number rhomb__number--2">
                62
            </div>
        </div>
    </div>
    <div class="rhomb">
        <div class="rhomb__number">100</div>
        <div class="rhomb__inner">
            <div class="rhomb__number rhomb__number--2">
                100
            </div>
        </div>
    </div>
    <div class="rhomb">
        <div class="rhomb__number">15</div>
        <div class="rhomb__inner">
            <div class="rhomb__number rhomb__number--2">
                15
            </div>
        </div>
    </div>
</div>

2
  • ✅Спасибо за решение! очень полезно узнать такое :-)
    – zemil
    1 авг 2017 в 18:01
  • Первый вариант не соответствует макету, получается просто сетка, а не "шахматная" плитка
    – zemil
    2 авг 2017 в 8:19
2

Сделаем ромбы через обычный квадрат с повёрнутым псевдоэлементом.

Для адекватных отступов, чтобы эти ромбы не налазили друг на друга применяем формулу a × (√2 - 1) / 2, где a — это высота и ширина квадрата. Вычислим константу (√2 - 1) / 2 ≈ 0,2071067811865475.

Демонстрация самого принципа:

.rhomb {
  width: 100px;
  height: 100px;
  position: relative;
  
  /* смещение чтобы не налезать на другие элементы */
  /* это аналогичино margin: calc(100px * (1.414213562373095 - 1) / 2)); */
  margin: calc(100px * 0.2071067811865475);
  
  /* стили для того чтобы элемент не занимал всю строку */
  /* и для центрирования текста вертикально и горизонтально */
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.rhomb:after {
  content: "";
  
  /* абсолтное позиционирование */
  position: absolute;
  
  /* занимаем столько же места, сколько контейнер */
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  
  /* окрашиваем в нужный цвет */
  background-color: red;
  
  /* вращаем на 45 градусов */
  transform: rotate(45deg);
  
  /* отрицательный z-index, чтобы не перекрывать контент главного блока */
  z-index: -1;
}
<div class="rhomb">Это же ромб</div>
<div class="rhomb">Это же ромб</div>
<div class="rhomb">Это же ромб</div>
<div class="rhomb">Это же ромб</div>
<div class="rhomb">Это же ромб</div>
<div class="rhomb">Это же ромб</div>
<div class="rhomb">Это же ромб</div>
<div class="rhomb">Это же ромб</div>
<div class="rhomb">Это же ромб</div>

Следующая проблема в том, что я не знаю как расположить элементы (и, видимо, это невозможно) как на макете адаптивно и не используя JavaScript. Поэтому покажу демонтрация для фиксированной разметки для трёх ромбов в ширину. Эту же разметку можно чуть модифицировать и использовать JavaScript. Надо только на resize убирать и навешивать rhomb--even-row.

.rhombs-container {
  display: flex;
  justify-content: center;
}

.rhombs {
  display: flex;
  flex-wrap: wrap;
  /* максимум 3 ромба учитывая также margin 10px */
  width: calc(3 * 100px * 1.414213562373095 + 60px);
  outline: 2px dotted gray;
}

.rhomb {
  width: 100px;
  height: 100px;
  position: relative;
  
  /* смещение чтобы не налезать на другие элементы */
  /* это аналогичино margin: calc(100px * (1.414213562373095 - 1) / 2) + 10px); */
  margin: calc(100px * 0.2071067811865475 + 10px);
  
  /* стили для того чтобы элемент не занимал всю строку */
  /* и для центрирования текста вертикально и горизонтально */
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.rhomb:after {
  content: "";
  
  /* абсолтное позиционирование */
  position: absolute;
  
  /* занимаем столько же места, сколько контейнер */
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  
  /* окрашиваем в нужный цвет */
  background-color: red;
  
  /* вращаем на 45 градусов */
  transform: rotate(45deg);
  
  /* отрицательный z-index, чтобы не перекрывать контент главного блока */
  z-index: -1;
}

/* арифметика смещения элементов чётных строк */
.rhomb--even-row {
  margin-top: calc(-100px / 2 * 1.414213562373095 + 20px);
  margin-left: calc(100px / 2 * (1.414213562373095 + 0.2071067811865475 * 2) + 20px);
  margin-bottom: calc(-100px / 2 * 1.414213562373095 + 20px);
}

.rhomb--even-row + .rhomb--even-row {
  margin-left: calc(100px / 2 * 0.2071067811865475 + 20px);
}-
<div class="rhombs-container">
  <div class="rhombs">
    <div class="rhomb">Это же ромб</div>
    <div class="rhomb">Это же ромб</div>
    <div class="rhomb">Это же ромб</div>
    <div class="rhomb rhomb--even-row">Это же ромб</div>
    <div class="rhomb rhomb--even-row">Это же ромб</div>
    <div class="rhomb">Это же ромб</div>
    <div class="rhomb">Это же ромб</div>
    <div class="rhomb">Это же ромб</div>
    <div class="rhomb rhomb--even-row">Это же ромб</div>
    <div class="rhomb rhomb--even-row">Это же ромб</div>
    <div class="rhomb">Это же ромб</div>
    <div class="rhomb">Это же ромб</div>
    <div class="rhomb">Это же ромб</div>
  </div>
</div>

Для чисел также подойдёт данная техника в сочении с градиентами (не включая случай с MARKETING, 62. Демонстрация:

body {
  background-color: #ccc;
}

.rhombs-container {
  display: flex;
  justify-content: center;
}

.rhombs {
  display: flex;
  flex-wrap: wrap;
  /* максимум 3 ромба учитывая также margin 10px */
  justify-content: space-around;
}

.rhomb {
  width: 100px;
  height: 100px;
  position: relative;
  
  /* смещение чтобы не налезать на другие элементы */
  /* это аналогичино margin: calc(100px * (1.414213562373095 - 1) / 2) + 10px); */
  margin: calc(100px * 0.2071067811865475 + 10px);
  
  /* стили для того чтобы элемент не занимал всю строку */
  /* и для центрирования текста вертикально и горизонтально */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  
  /* Стили для чисел */
  font-size: 50px;
  color: #fff;
  font-weight: bold;
}

.rhomb:after {
  content: "";
  
  /* абсолтное позиционирование */
  position: absolute;
  
  /* занимаем столько же места, сколько контейнер */
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  
  /* окрашиваем в нужный цвет */
  border: 1px solid #cd2a2a;
  
  /* вращаем на 45 градусов */
  transform: rotate(45deg);
  
  /* отрицательный z-index, чтобы не перекрывать контент главного блока */
  z-index: -1;
}

.rhomb:nth-child(1):after {
  background-image: linear-gradient(to left top, #cd2a2a 95%, transparent 0);
}

.rhomb:nth-child(2):after {
  background-image: linear-gradient(to left top, #cd2a2a 77%, transparent 0);
}

.rhomb:nth-child(3):after {
  background-image: linear-gradient(to left top, #cd2a2a 99%, transparent 0);
}

.rhomb:nth-child(4):after {
  background-image: linear-gradient(to left top, #cd2a2a 62%, transparent 0);
}

.rhomb:nth-child(5):after {
  background-image: linear-gradient(to left top, #cd2a2a 85%, transparent 0);
}
<div class="rhombs-container">
  <div class="rhombs">
    <div class="rhomb">95</div>
    <div class="rhomb">77</div>
    <div class="rhomb">99</div>
    <div class="rhomb">62</div>
    <div class="rhomb">85</div>
  </div>
</div>

Для установки градиента (случай MARKETING, 62) на шрифте ромба можно прибегнуть к комбинации свойств -webkit-background-clip: text; и -webkit-text-fill-color: transparent; (ну и разумеется самого градиента). Но и тут нам не обойтись без дополнительных градиентов и математики. Результат:

body {
  background-color: #ccc;
}


.rhombs-container {
  display: flex;
  justify-content: center;
}

.rhombs {
  display: flex;
  flex-wrap: wrap;
  /* максимум 3 ромба учитывая также margin 10px */
  justify-content: space-around;
}

.rhomb {
  width: 100px;
  height: 100px;
  position: relative;
  box-sizing: content-box;
  /* смещение чтобы не налезать на другие элементы */
  /* это аналогичино margin: calc(100px * (1.414213562373095 - 1) / 2) + 10px); */
  margin: calc(100px * 0.2071067811865475);
  /* стили для того чтобы элемент не занимал всю строку */
  /* и для центрирования текста вертикально и горизонтально */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* Стили для чисел */
  font-size: 80px;
  color: #fff;
  font-weight: bold;
  
  /* текст принимает картинку фона */
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.rhomb:after {
  content: "";
  
  /* абсолтное позиционирование */
  position: absolute;
  
  /* занимаем столько же места, сколько контейнер */
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  
  /* добавляем границу */
  border: 1px solid #cd2a2a;
  
  /* вращаем на 45 градусов */
  transform: rotate(45deg);

  /* отрицательный z-index, чтобы не перекрывать контент главного блока */
  z-index: -1;
}

.rhomb:nth-child(1) {
  background-image: linear-gradient(to top, currentColor calc(95% + (95% - 50%) * 0.414213562373095), #cd2a2a 0);
}

.rhomb:nth-child(2) {
  background-image: linear-gradient(to top, currentColor calc(77% + (77% - 50%) * 0.414213562373095), #cd2a2a 0);
}

.rhomb:nth-child(3) {
  background-image: linear-gradient(to top, currentColor calc(99% + (99% - 50%) * 0.414213562373095), #cd2a2a 0);
}

.rhomb:nth-child(4) {
  background-image: linear-gradient(to top, currentColor calc(62% + (62% - 50%) * 0.414213562373095), #cd2a2a 0);
}

.rhomb:nth-child(5) {
  background-image: linear-gradient(to top, currentColor calc(85% + (85% - 50%) * 0.414213562373095), #cd2a2a 0);
}

.rhomb:nth-child(6) {
  background-image: linear-gradient(to top, currentColor calc(25% + (25% - 50%) * 0.414213562373095), #cd2a2a 0);
}

.rhomb:nth-child(7) {
  background-image: linear-gradient(to top, currentColor calc(35% + (35% - 50%) * 0.414213562373095), #cd2a2a 0);
}

.rhomb:nth-child(8) {
  background-image: linear-gradient(to top, currentColor calc(45% + (45% - 50%) * 0.414213562373095), #cd2a2a 0);
}

.rhomb:nth-child(9) {
  background-image: linear-gradient(to top, currentColor calc(55% + (55% - 50%) * 0.414213562373095), #cd2a2a 0);
}

.rhomb:nth-child(1):after {
  background: linear-gradient(to left top, #cd2a2a 95%, transparent 0);
}

.rhomb:nth-child(2):after {
  background-image: linear-gradient(to left top, #cd2a2a 77%, transparent 0);
}

.rhomb:nth-child(3):after {
  background-image: linear-gradient(to left top, #cd2a2a 99%, transparent 0);
}

.rhomb:nth-child(4):after {
  background-image: linear-gradient(to left top, #cd2a2a 62%, transparent 0);
}

.rhomb:nth-child(5):after {
  background-image: linear-gradient(to left top, #cd2a2a 85%, transparent 0);
}

.rhomb:nth-child(6):after {
  background-image: linear-gradient(to left top, #cd2a2a 25%, transparent 0);
}

.rhomb:nth-child(7):after {
  background-image: linear-gradient(to left top, #cd2a2a 35%, transparent 0);
}

.rhomb:nth-child(8):after {
  background-image: linear-gradient(to left top, #cd2a2a 45%, transparent 0);
}

.rhomb:nth-child(9):after {
  background-image: linear-gradient(to left top, #cd2a2a 55%, transparent 0);
}
<div class="rhombs-container">
  <div class="rhombs">
    <div class="rhomb">95</div>
    <div class="rhomb">77</div>
    <div class="rhomb">99</div>
    <div class="rhomb">62</div>
    <div class="rhomb">85</div>
    <div class="rhomb">25</div>
    <div class="rhomb">35</div>
    <div class="rhomb">45</div>
    <div class="rhomb">55</div>
  </div>
</div>

Небольшая заметка:

Я использую 0 как ступенях градиентов, чтобы не дублировать предыдущие значения, так как по спецификации ступенька градиента не может быть меньше предыдущего значения.

If a color-stop has a position that is less than the specified position of any color-stop before it in the list, set its position to be equal to the largest specified position of any color-stop before it.

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.