[17/17] Испытание: зловещие тени. 100% /*Прошу критики*/

[Helvetios]

Можно без position: absolute; и псевдоэлементов.

CSS Код

.btn {  /* только тени */
  box-shadow: 
    0 -20px 0 -10px #c0392b,
    0 -40px 0 -20px #e74c3c,
    0 20px 0 -10px #2980b9,
    0 40px 0 -20px #3498db,
    inset 0 -5px 0 0 #2ecc71,
    inset 0 5px 0 0 #16a085;
}

.help {
  width: 125px;
  padding: 25px 0;  /* можно заменить на heigh: 50px; */
  margin-left: 25px;
  margin-top: -55px;
  box-shadow: 
     0 -5px 0 0 #2ecc71,
     0 5px 0 0 #16a085;
  }

Скриншот из задания

Да, плохая практика использовать дивы для этого, но камон. Он там специально для такого решения, что бы не городить псевдоэлементами.

P.S. Испытание х**ня из под коня, честное слово. Одно из худших, не в плане сложности, а в плане всратости задачи.

[karman]

как вариант:

html,
body {
  margin: 0;
  padding: 0;
  width: 300px;
  background-color: #ecf0f1;
  font-size: 18px;
  font-family: "Arial", sans-serif;
}

.btn {
  display: block;
  margin: 0 25px;
  margin-top: 100px;
  padding: 20px 0;
  width: 250px;
  border: none;
  box-sizing: content-box;
  background-color: #2c3e50;
  color: white;
  text-align: center;
  text-transform: uppercase;
  font: inherit;
  line-height: 20px;
  box-shadow: 0 -20px 0 -10px #c0392b,
              0 -40px 0 -20px #e74c3c,
              0 20px 0 -10px #2980b9,
              0 40px 0 -20px #3498db,
              inset 0 5px 0 0px #16a085,
              inset 0 -5px 0 0px #2ecc71;
}
.help {
  transform: translate(25px,-60px);
  width: 125px;
  height: 60px;
  box-shadow: inset 0 -5px 0 0px #16a085,
              inset 0 5px 0 0px #2ecc71;
}

[Wimaks]

Сделал через позиционирование и z-index.

.btn {
  display: block;
  margin: 0 25px;
  margin-top: 100px;
  padding: 20px 0;
  width: 250px;
  border: none;
  box-sizing: content-box;
  background-color: #2c3e50;
  color: white;
  text-align: center;
  text-transform: uppercase;
  font: inherit;
  line-height: 20px;
  z-index: 0;
  box-shadow: 
    inset 0 5px 0 0 #16a085,
    0 -20px 0 -10px #c0392b,
    0 -40px 0 -20px #e74c3c,
    inset 0 -5px 0 0 #2ecc71,
    0 20px 0 -10px #2980b9,
    0 40px 0 -20px #3498db;
}

.help {
  position: relative;
  width: 125px;
  height: 60px;
  top: -60px;
  left: 25px;
  z-index: 1;
  box-shadow:
    inset 0 -5px 0 0 #16a085,
    inset 0 5px 0 0 #2ecc71;
  
  }

[Solovey1966]

@Wimaks

.help {
  position: relative;
  width: 125px;
  height: 60px;
  top: -60px;
  left: 25px;
  z-index: 1;
  box-shadow:
    inset 0 -5px 0 0 #16a085,
    inset 0 5px 0 0 #2ecc71;

Объясните каким образом это решение разрывает внутренние тени на две половины?
Здесь верхняя тень одного цвета, нижняя другого. В задаче верхняя и нижняя тени разделены ровно наполовину и они разных цветов крест на крест

[DmZhuravlev]

06/12/2022 - 100%. Вроде без замудренностей.

.btn {
  display: block;
  margin: 0 25px;
  margin-top: 100px;
  padding: 20px 0;
  width: 250px;
  border: none;
  box-sizing: content-box;
  background-color: #2c3e50;
  color: white;
  text-align: center;
  text-transform: uppercase;
  font: inherit;
  line-height: 20px;
  box-shadow: 
  0 -20px 0 -10px #c0392b,
  0 -40px 0 -20px #e74c3c,
  inset 0 -5px 0 0  #2ecc71,
  inset 0 5px 0 0 #16a085, 
  0 20px 0 -10px #2980b9,
  0 40px 0 -20px #3498db;
}
.help {
  position:absolute;
  width: 125px;
  height: 60px;
  top: 100px;
  left: 25px;
  box-shadow: 
  inset 0 5px 0 0 #2ecc71, 
  inset 0 -5px 0 0 #16a085;
}

[Leyla]

мое решение, использовала позиционирование, 100%

html,
body {
margin: 0;
padding: 0;
width: 300px;
background-color: #ecf0f1;
font-size: 18px;
font-family: “Arial”, sans-serif;
}

.btn {
position: relative;
display: block;
margin: 0 25px;
margin-top: 100px;
padding: 20px 0;
width: 250px;
border: none;
box-sizing: content-box;
background-color: #2c3e50;
color: white;
text-align: center;
text-transform: uppercase;
font: inherit;
line-height: 20px;
box-shadow:
inset 0 -5px 0 0 #2ecc71,
inset 0 5px 0 0 #2ecc71,
0 -20px 0 -10px #c0392b,
0 -40px 0 -20px #e74c3c,
0 20px 0 -10px #2980b9,
0 40px 0 -20px #3498db;
}
.help::before {
content:"";
position: absolute;
width: 125px;
height: 5px;
background: #16a085;
margin: -5px 25px;
}
.help::after{
content:"";
position: absolute;
width: 125px;
height: 5px;
background: #16a085;
margin: -60px 150px;
}

[Travo1ta]

html,
body {
margin: 0;
padding: 0;
width: 300px;
background-color: #ecf0f1;
font-size: 18px;
font-family: “Arial”, sans-serif;
}

.btn {
display: block;
margin: 0 25px;
margin-top: 100px;
padding: 20px 0;
width: 250px;
border: none;
box-sizing: content-box;
background-color: #2c3e50;
color: white;
text-align: center;
text-transform: uppercase;
font: inherit;
line-height: 20px;
box-shadow:
0 -20px 0 -10px #c0392b,
0 -40px 0 -20px #e74c3c,
0 20px 0 -10px #2980b9,
0 40px 0 -20px #3498db,
inset 0px 5px 0 0 #2ecc71,
inset 0 -5px 0 0 #2ecc71;
}
.btn:before,
.btn:after {
content: “”;
position: absolute;
width: 125px;
height: 5px;
background-color: #16a085;
}
.btn:before {
left: 150px;
bottom:291px;
}
.btn:after {
left: 25px;
top: 155px;
}

[DRKNSS]

На 100%
html,
body {
margin: 0;
padding: 0;
width: 300px;
background-color: #ecf0f1;
font-size: 18px;
font-family: “Arial”, sans-serif;
}

.btn {
box-sizing:content-box;
display: block;
margin: 0 25px;
margin-top: 100px;
padding: 20px 0;
width: 250px;
border: none;
background-color: #2c3e50;
color: white;
text-align: center;
text-transform: uppercase;
font: inherit;
line-height: 20px;
position:relative;
box-shadow:
inset 0px 5px #16a085,
inset 0px -5px #16a085,
0px -20px 0px -10px #c0392b,
0px -40px 0px -20px #e74c3c,
0px 20px 0px -10px #2980b9,
0px 40px 0px -20px #3498db;

}
.btn::before{
content:“”;
position:absolute;
top:-5px;
left:0;
width:125px;
height:5px;
box-shadow: 0px 5px #2ecc71;
}

.btn::after{
content:“”;
position:absolute;
bottom:5px;
right:0;
width:125px;
height:5px;
box-shadow: 0px 5px #2ecc71;
}