How to add box shadow around psedo elements of polygon? - css

Question

I added box shadows to the main shape but I can't get it to properply add to the ::before and :after triangles making up the polygon.
When I try to add box-shadow: 0 0 15px 1px #303030; to the form ::before and ::after it gives a shadow around the box containing the pesduo elements
Codepen
* {
box-sizing: border-box;
}
header {
height: 100px;
text-align:center;
line-height: 100px;
background-color: gold;
}
form {
box-shadow: 0 0 15px 1px #303030;
background-color: lightgreen;
margin: -10px auto;
padding: 20px;
width: 240px;
position: relative;
}
form::before {
content: '';
width: 0;
height: 0;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-bottom: 20px solid lightgreen;
position: absolute;
top: -20px;
left: 50%;
margin-left: -20px;
}
form::after {
content: '';
width: 0;
height: 0;
border-left: 120px solid transparent;
border-right: 120px solid transparent;
border-top: 70px solid lightgreen;
position: absolute;
bottom: -70px;
left: 0;
}
input {
display: block;
width: 100%;
}

Answer 1

Please try maybe it will good for you -
<header>Header</header>
<form>
<label for="lastname">Lastname: </label>
<input type="text" id="lastname" />
<br><br>
<label for="firstname">Firstname: </label>
<input type="text" id="firstname" />
<br>
<br>
<input type="submit" value="Submit">
</form>
* {
box-sizing: border-box;
}
header {
height: 100px;
text-align:center;
line-height: 100px;
background-color: gold;
}
form {
box-shadow: 0 0 15px 1px #303030;
background-color: lightgreen;
margin: -10px auto;
padding: 20px;
width: 240px;
position: relative;
}
form::before {
content: '';
position: absolute;
width: 0;
height: 0;
top: 1px;
left: 50%;
margin-left: -30px;
border: 20px solid black;
border-color: lightgreen lightgreen transparent transparent;
transform-origin: 0 0;
transform: rotate(-45deg);
box-shadow: 3px -3px 3px 0 rgba(0, 0, 0, 0.4);
}
form::after {
content: '';
position: absolute;
width: 0;
height: 0;
bottom: -170px;
left: 0;
border: 85px solid black;
border-color: transparent transparent lightgreen lightgreen;
transform-origin: 0 0;
transform: rotate(-45deg);
box-shadow: -3px 3px 3px 0 rgba(0, 0, 0, 0.4);
}
input {
display: block;
width: 100%;
}
Link to jsfiddle - http://jsfiddle.net/oj26aLmr/1/