Having trouble aligning my code for Responsive html css Curly Braces. The top position is working perfectly, but the bottom position is not aligning correctly. Does anyone know how to adjust the positioning to be at the bottom? Thank you.
Here is my code:
.brace{
border: 2px solid #CCC;
height: 25px;
position:relative;
border-bottom: 0;
border-radius: 25px 25px 0 0;
margin-top: 25px;
}
.brace.top:after{
content: '';
position:absolute;
left: 50%;
width: 50px;
height: 55px;
margin-top: -27px;
margin-left: -25px;
background-color: #FFF;
background:
linear-gradient(135deg, transparent 10px, #CCC 0) top left,
linear-gradient(225deg, transparent 10px, #CCC 0) top right,
linear-gradient(315deg, transparent 10px, #CCC 0) bottom right,
linear-gradient(45deg, transparent 10px, #CCC 0) bottom left;
background-size: 50% 50%;
background-repeat: no-repeat;
background-image:
radial-gradient(circle at 0 0, transparent 25px, #CCC 26px, #FFF 28px ),
radial-gradient(circle at 100% 0, transparent 25px, #CCC 26px, #FFF 28px),none,none;
}
.brace.bottom{
border-top: 0;
border-bottom: 2px solid #CCC;
border-radius: 0 0 25px 25px;
margin-top: 0;
}
.brace.bottom:after{
content: '';
position:absolute;
left: 50%;
width: 50px;
height: 55px;
margin-top: 0px;
margin-left: -25px;
background-color: #FFF;
background:
linear-gradient(135deg, transparent 10px, #25aae1 0) top left,
linear-gradient(225deg, transparent 10px, #25aae1 0) top right,
linear-gradient(315deg, transparent 10px, #25aae1 0) bottom right,
linear-gradient(45deg, transparent 10px, #25aae1 0) bottom left;
background-size: 50% 50%;
background-repeat: no-repeat;
background-image:
radial-gradient(circle at 0 0, transparent 25px, #25aae1 26px, #25aae1 28px ),
radial-gradient(circle at 100% 0, transparent 25px, #25aae1 26px, #25aae1 28px),none,none;
}<div class="wrapper">
<div class="content">
<div class="brace top"></div>
<br>
<div class="brace bottom"></div>
</div>
</div>