Задать стиль через елемент

Question

Вот макет

А у меня вот так

Вот HTML

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

.thumb {
  display: flex;
  width: 50%;
  background: #E4E7F6;
}

.thumb:nth-child(odd) {
  background: #fff;
}

<div class="thumbnails">
  <div class="thumb">
    <o>Текст</o>
  </div>
  <div class="thumb">
    <o>Текст</o>
  </div>
  <div class="thumb">
    <o>Текст</o>
  </div>
  <div class="thumb">
    <o>Текст</o>
  </div>
  <div class="thumb">
    <o>Текст</o>
  </div>
  <div class="thumb">
    <o>Текст</o>
  </div>
</div>

Нужно распределить цвета как на макете. Как это сделать?

Answer 1

Для решения данной задачи можно воспользоваться псевдоклассами и выборкой элементов. Например так

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

.thumb {
  position: relative;
  display: flex;
  width: 50%;
  background: #fff;
  height: 50px;
  align-items: center;
  justify-content: center;
}

.thumbnails .thumb:nth-child(1),
.thumbnails .thumb:nth-child(4),
.thumbnails .thumb:nth-child(5) {
  background: #e4e7f6;
}

.decor-triangle:before {
  content: "";
  position: absolute;
  right: 0;
  top: 0;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 25px 50px 25px 0;
  border-color: transparent #fff transparent transparent;
  z-index: 1;
  transform: rotate(0deg);
}
.decor-triangle-right:before {
  right: initial;
  left: 0;
  transform: rotate(0deg) scale(-1, -1);
}

<div class="thumbnails">
  <div class="thumb decor-triangle"><p>Text</p></div>
  <div class="thumb"><p>Text</p></div>
  <div class="thumb"><p>Text</p></div>
  <div class="thumb decor-triangle decor-triangle-right"><p>Text</p></div>
  <div class="thumb decor-triangle"><p>Text</p></div>
  <div class="thumb"><p>Text</p></div>
</div>

Answer 2

Сделал, но не знал, можно ли структуру HTML менять. Обернул по 2 thumb в thumb-row и стилями фофрмил через odd и even, только задав их не themb, а thumb-row.
Также сразу сделал отступы элементов внутри thumb, что бы не пришлось вам париться над этим.

* {
  margin: 0;
  box-sizing: border-box;
}
.thumbnails {
  display: block;
  width: 100%;
}
.thumb-row {
  display: flex;
}

.thumb {
  display: flex;
  align-items: center;
  width: 50%;
  height: 58px;
  background: #E4E7F6;
  position: relative;
}
.thumb-row:nth-child(odd) .thumb:first-child {
  padding: 0 50px 0 15px;
}
.thumb-row:nth-child(odd) .thumb:nth-child(2) {
  padding: 0 15px;
}
.thumb-row:nth-child(even) .thumb:first-child {
  padding: 0 50px 0 15px;
}
.thumb-row:nth-child(even) .thumb:nth-child(2) {
  padding: 0 15px 0 50px;
}
.thumb-row:nth-child(even) .thumb:first-child {
  background: #fff;
}
.thumb-row:nth-child(odd) .thumb:nth-child(2) {
  background: #fff;
}
.thumb-row .thumb:before {
  content: '';
  position: absolute;
  top: 0;
  z-index: 10;
  display: inline-block;
  width: 0; 
  height: 0; 
}
.thumb-row:nth-child(even) .thumb:first-child:before {
  right: 0;
  border-left: 29px solid transparent;
  border-right: 29px solid transparent;
  border-bottom: 35px solid white;
  transform: rotate(90deg) translate(12px, -46px);
  
}
.thumb-row:nth-child(odd) .thumb:nth-child(2):before {
  left: 0;
  border-left: 29px solid transparent;
  border-right: 29px solid transparent;
  border-bottom: 35px solid white;
  transform: rotate(-90deg) translate(-12px, -46px);
}

<div class="thumbnails">
  <div class="thumb-row">
    <div class="thumb">
      <o>Текст Текст Текст Текст Текст Текст Текст Тексn tewtw</o>
    </div>
    <div class="thumb">
      <o>Текст</o>
    </div>
  </div>
  <div class="thumb-row">
    <div class="thumb">
      <o>Текст</o>
    </div>
    <div class="thumb">
      <o>Текст</o>
    </div>
  </div>
  <div class="thumb-row">
    <div class="thumb">
      <o>Текст</o>
    </div>
    <div class="thumb">
      <o>Текст</o>
    </div>
  </div>
</div>

БЛОГ НА HUSL

Задать стиль через елемент

Ответы (2 шт):