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

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

Подскажите пожалуйста как разобраться в прохождении этой задачи. Какая разница псевдокласс :: афтер или :: бефоре использовать? Как делается пятиугольник?

2
3

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

.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::after{
top: -30px;
border-width: 0 30px 30px;
}

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

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

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

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

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

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

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

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