Ромбовидные элементы галереи и двухцветная заливка чисел css

#html #css #вёрстка

Какое наиболее оптимальное решение для реализации плитки галереи в виде ромбов, как
на рисунке ниже, моим решением является два 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;
}

  
      
Vinyl record
  
  
      
3D Wooden Logo
  
  
      
Hard Cover Book
  
  
      
macbook-air600
  
  
      
Silver Stamping
  
  
      
T-Shirt MockUp
  
  
      
Fashion Glasses
  
  
      
picjumbo
  
  
      
Embossed Leather
  
  
      
Billboard
  
  
      
macbook pro
  
  
      
Vintage Car
  
  
      
madebyvadim
  







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


    

Ответы

Ответ 1

Вариант 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%;       
    }
}

  

    

      
        
Vinyl record
      
    
    

      
        
3D Wooden Logo
      
    
    

      
        
Hard Cover Book
      
    
    

      
        
macbook-air600
      
    
    

      
        
Silver Stamping
      
    
    

      
        
T-Shirt MockUp
      
    
    

      
        
Fashion Glasses
      
    
    

      
        
picjumbo
      
    
    

      
        
Embossed Leather
      
    
    

      
        
Billboard
      
    
    

      
        
macbook pro
      
    
    

      
        
Vintage Car
      
    
  





Цифры



* {
    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;
}

    

        
62
        

            

                62
            
        
    
    

        
100
        

            

                100
            
        
    
    

        
15
        

            

                15
            
        
    



Ответ 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;
}
Это же ромб
Это же ромб
Это же ромб
Это же ромб
Это же ромб
Это же ромб
Это же ромб
Это же ромб
Это же ромб




Следующая проблема в том, что я не знаю как расположить элементы (и, видимо, это
невозможно) как на макете адаптивно и не используя 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);
}-

  

    
Это же ромб
    
Это же ромб
    
Это же ромб
    
Это же ромб
    
Это же ромб
    
Это же ромб
    
Это же ромб
    
Это же ромб
    
Это же ромб
    
Это же ромб
    
Это же ромб
    
Это же ромб
    
Это же ромб
  





Для чисел также подойдёт данная техника в сочении с градиентами (не включая случай
с 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);
}

  

    
95
    
77
    
99
    
62
    
85
  





Для установки градиента (случай 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);
}

  

    
95
    
77
    
99
    
62
    
85
    
25
    
35
    
45
    
55
  





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

Я использую 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.