[33/33] Прошу дать толчок

Курсы §30. Рамки и фоны, часть 2
1

С предыдущими заданиями разобрался и все понял. Но в логику этого вообще вникнуть не получается. Тут же нет никаких бордеров в CSS. Как понять что куда ставить?

2

Ссылку на задание хотя бы прикрепите.

3

Пожалуйста: Ссылка на здание

4

Уже забыла, какое там задание последнее.
Есть инструкция в этой теме: Испытание: ювелирная работа [33/33] Помогите

1 лайк
5

спасибо, сейчас посмотрю

6

Провозился 2 часа чтобы вникнуть в суть. Но как только вник сделал с первого раза на 100%.
Для тех кто только открыл задание поясню border-width: Xpx Ypx Zpx; где:
X- top;
Y- left и right;
Z- bottom.

Код:

.stone {
    position: absolute;
}

.stone::after, .stone::before {
    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::after {
    border-width: 0 50px 50px;
}

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

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

.rhomba::before, .rhomba::after {
    border-width: 50px 30px;
    border-color: #ffdc00 transparent; /*желтый*/
}

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

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

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

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

P.S. Ineska, спасибо.

1 лайк
7

Можете написать каков был ход вашей мысли? Я даже по готовому коду не могу понять. Самое сложное упражнение из всех, которые мне до этого встречались

2 лайка