<fieldset class=d1><legend>Wash Your Hands</legend></fieldset>
<fieldset class=d1><legend>Stay Apart</legend></fieldset>
<fieldset class=d1><legend>Wear A Mask</legend></fieldset>
<fieldset class=d1><legend>Stay Home</legend></fieldset>
<fieldset class=d2><legend>Wash Your Hands</legend></fieldset>
<fieldset class=d2><legend>Stay Apart</legend></fieldset>
<fieldset class=d2><legend>Wear A Mask</legend></fieldset>
<fieldset class=d2><legend>Stay Home</legend></fieldset>
body{
display: grid;
margin: auto;
margin-top: calc(50vh - 170px);
width: 420px;
height: 200px;
}
fieldset{
border: 6px solid transparent;
border-top-color: black;
box-sizing: border-box;
grid-area: 1 / 1;
padding: 20px;
width: 200px;
}
.d2{ grid-area: 1 / 2; }
fieldset:nth-of-type(2){ transform: rotate(90deg); }
fieldset:nth-of-type(3){ transform: rotate(180deg); }
fieldset:nth-of-type(4){ transform: rotate(-90deg); }
fieldset:nth-of-type(6){ transform: rotate(90deg); }
fieldset:nth-of-type(7){ transform: rotate(180deg); }
fieldset:nth-of-type(8){ transform: rotate(-90deg); }
legend{
font: 9pt/0 'Averia Serif Libre';
padding: 0 4px;
}
.d1 legend{ margin-left: auto; }
.d2 legend{ margin-right: auto; }
fieldset:nth-of-type(3)>legend{ transform: rotate(180deg); }
fieldset:nth-of-type(7)>legend{ transform: rotate(180deg); }
body {
user-select: none;
-webkit-user-select: none;
}
This Pen doesn't use any external JavaScript resources.