Испытание: ювелирная работа

И, напоследок, вам предстоит интересное испытание: собрать по кусочкам «драгоценные» кристаллы разной формы, которые сделаны с помощью рамок, фонового цвета и псевдоэлементов.

Все свойства и их значения уже заданы, остаётся только подобрать к ним верные селекторы.

Подсказка: для решения используйте оба псевдоэлемента ::before и ::after.

Решение

Решение испытания будет доступно через несколько минут. Используйте его, если возникнут сложности. А пока попытайтесь пройти испытание самостоятельно.

.stone {
  position: absolute;
}

.stone::before,
.stone::after {
  position: absolute;
  border-style: solid;
  content: "";
}

.rhomba {
  bottom: 70px;
  left: 50px;
}

.penta {
  top: 20px;
  right: 40px;
  overflow: hidden;
  width: 100px;
  height: 100px;
}


.hexa {
  top: 50px;
  left: 40px;
  width: 80px;
  height: 40px;
}

.hexa {
  background-color: #2ecc40;
}

.octa {
  right: 45px;
  bottom: 50px;
  width: 90px;
  height: 35px;
}

.octa {
  background-color: #7fdbff;
}

.hexa::before,
.hexa::after {
  border-color: #2ecc40 transparent;
}

.penta::before,
.penta::after {
  border-color: #ff4136 transparent;
}

.octa::before,
.octa::after {
  width: 30px;
  border-color: #7fdbff transparent;
}

.octa::before {
  top: -30px;
  border-width: 0 30px 30px;
}

.penta::before {
  border-width: 0 50px 50px;
}

.hexa::before {
  top: -30px;
  border-width: 0 40px 30px;
}

.hexa::after {
  bottom: -30px;
  border-width: 30px 40px 0;
}


.rhomba::before,
.rhomba::after {
  border-width: 50px 30px;
  border-color: #ffdc00 transparent;
}

.penta::after {
  top: 50px;
  border-width: 100px 50px 0;
}

.rhomba::before {
  top: 0;
  border-bottom: 0;
}

.octa::after {
  bottom: -30px;
  border-width: 30px 30px 0;
}

.rhomba::after {
  bottom: 0;
  border-top: 0;
}

Притормози, дружище

Проходить вызовы части «Рамки и фоны. Погружение» тренажёра «Продвинутая работа с фонами и рамками» можно после регистрации и оформления подписки.

Зарегистрироваться