<ul id="mrtc">
<li class="m"><span></span></li>
<li class="r"><span></span></li>
<li class="t"><span></span></li>
<li class="c"><span></span></li>
</ul>
#mrtc {
margin: auto;
overflow: hidden;
}
#mrtc::before {
content: "";
display: block;
padding-top: 12.5%;
}
#mrtc li {
float: left;
display: block;
width: 23%;
margin: 0 1%;
position: relative;
}
#mrtc li:before {
content: "";
display: block;
padding-top: 50%;
}
#mrtc span {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
display: block;
}
#mrtc .m span {
border: 2px solid #000;
border-bottom: none;
-webkit-border-top-right-radius: 10% 20%;
-moz-border-top-right-radius: 10% 20%;
border-top-right-radius: 10% 20%;
}
#mrtc .m span:before {
content: "";
position: absolute;
top: 0;
left: 50%;
display: block;
background: #000;
width: 2px;
height: 100%;
margin-left: -1px;
}
#mrtc .r span {
border: 2px solid #000;
border-right: none;
border-bottom: none;
-webkit-border-top-left-radius: 10% 20%;
-moz-border-top-left-radius: 10% 20%;
border-top-left-radius: 10% 20%;
}
#mrtc .t span {
background: #c00;
width: 100%;
height: 200%;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-tradius: 50%;
margin-top: -50%;
}
#mrtc .t span:before {
content: "";
position: absolute;
top: 0;
left: 50%;
display: block;
background: #fff;
width: 2px;
height: 100%;
margin-left: -1px;
}
#mrtc .t span:after {
content: "";
position: absolute;
top: 50%;
left: 0;
display: block;
background: #fff;
width: 100%;
height: 2px;
margin-top: -1px;
}
#mrtc .c span {
border: 2px solid #000;
border-right: none;
-webkit-border-top-left-radius: 10% 20%;
-moz-border-top-left-radius: 10% 20%;
border-top-left-radius: 10% 20%;
-webkit-border-bottom-left-radius: 10% 20%;
-moz-border-bottom-left-radius: 10% 20%;
border-bottom-left-radius: 10% 20%;
}
@media screen and (min-width:560px){
#mrtc li span {
border-width: 3px !important;
}
#mrtc .m span:before,
#mrtc .t span:before {
width: 3px;
}
#mrtc .t span:after {
height: 3px;
}
}
@media screen and (max-width:320px){
#mrtc li span {
border-width: 1px !important;
}
#mrtc .m span:before,
#mrtc .t span:before {
width: 1px;
}
#mrtc .t span:after {
height: 1px;
}
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.