HTML Academy Рамки и фоны, часть 2 / Испытание: ювелирная работа [33/33] - 91%

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

Всем привет. Подскажите пожалуйста, в какую сторону думать? Совсем запутался, дальше 91% не могу уйти.
В чужих темах ответ не подглядываю, т.к. хочу всё сделать своим умом.

.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, .octa::before, .octa::after {
    background-color: #7fdbff;
}

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

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

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

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

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

selector {
    border-width: 0 50px 50px;
}

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

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

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

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

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

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

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

Раз не хотите смотреть - делайте сразу 1 камень полностью (это будут класс + псевдоклассы). Когда подберёте селекторы - вырезайте их и переносите в низ кода, чтобы собранная фигура не мешалась. Таким образом, сузите круг поиска. И т.д. Также не должно быть такого “перекрёста” .penta::before, .hexa::after {};

3

Пробую следовать такой логике, пока безрезультатно. Не пойму, то ли я тупой, то ли задание такое сложное(

Что делал:

1.) Указал вводные данные (относительное позиционирование для всех камней и для псевдоэлементов ДО и ПОСЛЕ):

.stone {
    position: absolute;
}

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

2.) Указал месторасположение камня octa:

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

3.) Указал цвет фона для octa и его псевдоэлемнтов:

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

4.) Пробовал подставлять значения .octa::after и .octa::before в каждый из селекторов. Результат нулевой.

Попробовал в рамках одного из предыдущих заданий создать фигуру наподобие hexa, вот что вышло:

.arrow-bottom {
    width: 0;
    height: 0;
    position: relative;
    border: 40px solid #2ecc40;
    border-top-width: 0;
    border-left-color: transparent;
    border-right-color: transparent;
    margin-left: 100px;
    border-bottom-width: 30px;
}

.arrow-bottom::after {
    position: absolute;
    content: "";
    width: 80px;
    height: 40px;
    background-color: #2ecc40;
    top: 30px;
    left: -40px;
}

.arrow-bottom::before {
    position: absolute;
    content: "";
    border: 40px solid #2ecc40;
    border-bottom-width: 0;
    border-top-width: 30px;
    border-left-color: transparent;
    border-right-color: transparent;
    top: 70px;
    left: -40px;
}

А вот и penta:

.arrow-bottom {
    width: 0;
    height: 0;
    position: relative;
    border: 50px solid #ff4136;
    border-top-width: 0;
    border-left-color: transparent;
    border-right-color: transparent;
    margin-left: 100px;
    border-bottom-width: 50px;
}

.arrow-bottom::after {
    position: absolute;
    content: "";
     border: 25px solid #ff4136;
    width: 50px;
    height: 0px;
    top: 50px;
    left: -50px;
    border-bottom-width: 0;
   border-left-color: transparent;
   border-right-color: transparent;
    border-top-width: 50px;

}

Сам могу такие фигуры делать без проблем, но не выходит их сделать в рамках испытания(

4

Это задание - на мой взгляд - самое сложное за все интерактивные уроки. Не совсем стандартно здесь собираются некоторые фигуры. Ещё наводку даю: для “запчастей”-псевдоэлементов смотрите селекторы со свойством border-. Касательно .octa - Вы прописали сразу 3 элемента на 1 правило (цвет). Но помните, что псевдоэлементы - части фигуры - это “игра” с границами! Соответственно, не совсем правильно писать им цвет просто через background-color. Я бы выбирал что-то, что начинается со слова border-. Простой перебор здесь не получится. Или это будет ооооочень долго. И ещё повторю: пока не сделаете какой-либо камень полностью, не гонитесь за другими. Сделайте для начала зелёный и голубой - это достаточно легко. Оставшиеся 2 будет легче найти.

1 лайк
5

Благодарю за подсказку, Алексей!
Сделал всё по Вашему совету.
Начал с синей и зелёной фигуры (действительно оказались лёгкими), переносил код вниз.
Сел на свежую голову и выполнил задание)

.stone {
    position: absolute;
}

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

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


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


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

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


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

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

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

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

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

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

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

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

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

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


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

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


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

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

На здоровье, рад за Вас! Вот видите, главное - не хвататься за всё сразу и свежая голова:slight_smile:

1 лайк
7

Оч понравилось данное задание! Спасибо разрабам! Много мата, не много кофе, масса переженных нервных клеток и пол-дня за заданием.
З.Ы. ваш шаблон я “закоментил” и сделал все с нуля, по своему. Т.к. разобраться в вашем оказалось более заковыристой задачей. Но только самостоятельно, я “допер” таки до всех нюансов селектора border во всем его многообразии.

8

На редкость дурацкое задание, осложнено без меры. Куча классов, которые ни для чего не нужны, правила неизвестно зачем разбиты на части, так что просто непонятно, с какого конца за них браться. Зачем так было делать?!

2 лайка
9

100% - единственное испытание на котором я реально затупил!
Делал его какой то псих как по мне)

.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::after, .hexa::before {
    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;
}