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

Курсы §30. Рамки и фоны, часть 2
1 
.stone {
position: absolute;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

.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;
}
4 лайка
2

А в чем прикол?

3

не понял. ты о чем??

4

смутило отсутствие вопросов по коду

5

Спасибо за подсказку. В итоге во всем полностью розобрался.

6

Спасибо! Пару дней мучался, а тут пенту посмотрел и всё понял.

7

Спасибо! Долго мучилась, и только благодаря вашей подсказке поняла что к чему. :rose:

1 лайк
8

День смотрел, но не осилил. На форуме подсмотрел код. Опять день смотрел, но с тем же результатом. Решил пошагово “прокрутить” решение “ювелирки”. Для, надеюсь, малочисленной армии “особо одарённых”, в рядах которой, как оказалось, состоит и ваш покорный слуга, выкладываю “пошаговый решебник” обсуждаемого теста. Текст - в открытом формате “odt”, который должен читать WORD.
[https://yadi.sk/d/D4iZC7PJnILF_A](https://yadi.sk/i/Sf_jnQtVUaLSbA)