Подскажите, как сделать такие тени? Остальную часть задания выполнил - у меня 91% совпадения)
Или с помощью псевдоэлементов или в разметке есть вспомогательный блок .help
Я делал через доп блок, делал ему тени и абсолютное позиционирование
Вы имеете ввиду ::before :: after? Я с помощью них даже не попробовал еще, надо будет попрактиковать.
1 лайк
Пробуйте, так будет красивее)
Единственное только пока не сообразил как это реализовать
Натолкнуть на мысль?
Был бы не против.
Принцип почти такой же. Два псевдоэлемента, блочный тип, высота такая, как у тени, спозиционировать абсолютно.
спасибо 
но в данном случае код с элементом help будет короче. Но ради опыта попробую.
“Короче” не всегда означает “правильнее”. Я тоже всегда за краткость но читала, что пустые элементы в разметке - дурной тон.
Не могу не согласиться.
html,
body {
width: 300px;
margin: 0;
padding: 0;
font-size: 18px;
font-family: “Arial”, sans-serif;
background: #ecf0f1;
}
.btn {
width: 250px;
margin: 0 25px;
margin-top: 100px;
padding: 20px 0;
line-height: 20px;
text-align: center;
text-transform: uppercase;
color: white;
background: #2c3e50;
cursor: pointer;
box-shadow:
inset 25px -30px 0 -25px #2ecc71,
inset 25px 30px 0 -25px #16a085,
0 -20px 0 -10px #c0392b,
0 -40px 0 -20px #e74c3c,
0 20px 0 -10px #2980b9,
0 40px 0 -20px #3498db;
}
.btn::before {
content: “”;
position: absolute;
top: 100px;
display: block;
width: 125px;
height: 50px;
border: 5px solid #2ecc71;
border-bottom-color: #16a085;
border-left: 0;
border-right: 0;
}
Можно и с одним псевдоэлементом 
2 лайка
.btn {
width: 250px;
margin: 0 25px;
margin-top: 100px;
padding: 20px 0;
line-height: 20px;
text-align: center;
text-transform: uppercase;
color: white;
background: #2c3e50;
cursor: pointer;
box-shadow:
inset 0 -5px 0 0px #16a085,
inset 0 5px 0 0px #16a085,
0 20px 0 -10px #2980b9,
0 -20px 0 -10px #c0392b,
0 40px 0 -20px #3498db,
0 -40px 0 -20px #e74c3c;
position: relative;
}
.btn::before {
position: absolute;
width: 125px;
height: 5px;
background: #2ecc71;
content: “”;
top: 0px;
left: 0px;
box-shadow: 125px 55px 0 0 #2ecc71;
}
ну я таким образом справился.
Как теперь это адаптивным сделать, чтобы можно было растягивать и сжимать картинку, а линии располагались также равномерно?
Есть вариант создать в диве див с флексом, но это уже на костыль - ради полосочки целый блок создавать в dom’е.
.btn {
width: 250px;
margin: 0 25px;
margin-top: 100px;
padding: 20px 0;
line-height: 20px;
text-align: center;
text-transform: uppercase;
color: white;
background: #2c3e50;
cursor: pointer;
box-shadow:
0 20px 0 -10px #2980b9,
0 40px 0 -20px #3498db,
0 -20px 0 -10px #c0392b,
0 -40px 0 -20px #e74c3c,
inset 0 10px 0 -5px #2ecc71,
inset 0 -10px 0 -5px #2ecc71;
position: relative;
}
.help {
width: 125px;
height: 5px;
background: #16a085;
position:absolute;
top: 100px;
left: 150px;
box-shadow: -125px 55px 0 0 #16a085;
}
в HTML редакторе есть еще один див с классом help. Я сделал с помощью его.
2 дня сидела над этим заданием… хотелось, чтобы при изменении любого значения - все в кнопке оставалось на местах. потом уже нашла ваш вариант реализации задания. немного его подкорректировала и “ура”!!! теперь, чтобы я не меняла - все остается на своих местах!!!
спасибо!
вот мой вариант на основе вашего)
html,
body {
width: 300px;
margin: 0;
padding: 0;
font-size: 18px;
font-family: “Arial”, sans-serif;
background: #ecf0f1;
}
.btn {
width: 250px;
margin: 0 25px;
margin-top: 100px;
padding: 20px 0;
line-height: 20px;
text-align: center;
text-transform: uppercase;
color: white;
background: #2c3e50;
cursor: pointer;
position: relative;
box-shadow:
inset 0 10px 0 -5px #16a085,
inset 0 -10px 0 -5px #16a085,
0 20px 0 -10px #2980b9,
0 -20px 0 -10px #c0392b,
0 40px 0 -20px #3498db,
0 -40px 0 -20px #e74c3c;
}
.btn::before,
.btn::after {
position: absolute;
width: 50%;
height: 5px;
background: #2ecc71;
content: “”;
float:left;
}
.btn::before {
top: 0;
left: 0;
}
.btn::after {
bottom: 0;
right: 0;
}