Испытание: ювелирная работа [33/33] Помогите

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

Начала рассуждать и рассматривать как и почему, и не пойму что означает content: ‘’; и как самой понять что ставить нужно именно .stone::before,
.stone::after, в селекторы к
{
position: absolute;
border-style: solid;
content: ‘’;
}

22

Ужасное задание

2 лайка
23

Расскажи, пожалуйста, что именно вам не понравилось.

24

Сделал чуть ли не методом тыка, ИМХО такое лучше давать с нуля писать, или к прямоугольникам добавлять разные углы. А то это какая то головоломка выходит…(из за большого разбития свойств). Так то сделал, но просто перебором…

25

Задание само по себе легкое, можно решить методом тыка, но можно засесть и на несколько часиков)

26

Ох и мутотень. Присоединяюсь к тем, кто сделал, но ничего не понял )

1 лайк
27

Вообще не понял смысл этого задания. Зачем эти подборы и угадайки? Промыкался почти день, потом плюнул и просто написал за полчаса своё с небольшим количеством кода “угадайки”. Совпадение 100% засчиталось и ладно. А само задание для мазохистов придумано.

.stone {
position: absolute;
}

.stone::before,
.stone::after {
position: absolute;
border-style: solid;
content: “”;
border-left-color: transparent;
border-right-color: transparent;
}

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

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

.hexa {
top: 50px;
left: 40px;
width: 80px;
height: 40px;
background-color: #2ecc40;
}

.octa {
right: 45px;
bottom: 50px;
width: 90px;
height: 35px;
background-color: #7fdbff;
}

.hexa::before {
border-width: 0 40px 30px;
border-bottom-color: #2ecc40;
top: -30px;
}

.hexa::after {
border-width: 30px 40px 0;
border-top-color: #2ecc40;
top: 40px;
}

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

.rhomba::after {
border-width: 50px 30px 0;
border-top-color: #ffdc00;
}

.octa::before {
width: 30px;
border-width: 0 30px 30px;
border-bottom-color: #7fdbff;
bottom: 35px;
}

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

.penta::before {
border-width: 0 50px 50px;
border-bottom-color: #ff4136;
}

.penta::after {
width: 50px;
border-width: 50px 25px 0 25px;
border-top-color: #ff4136;
top: 50px;
}