<fieldset><legend>One</legend></fieldset>
<fieldset><legend>Two</legend></fieldset>
<fieldset><legend>Three</legend></fieldset>
<fieldset><legend>Four</legend></fieldset>
<fieldset><legend>Eight</legend></fieldset>
<fieldset><legend>Seven</legend></fieldset>
<fieldset><legend>Six</legend></fieldset>
<fieldset><legend>Five</legend></fieldset>
body{
	display: grid; 
	margin: auto; 
	margin-top: calc(50vh - 170px); 
	width: 300px; height: 300px;
}
fieldset{
	border: 10px solid transparent; 
	border-top-color: black; 
	box-sizing: border-box; 
	grid-area: 1 / 2; 
	padding: 20px; 
	width: 136px; 
	border-radius: 10px;
}
fieldset:nth-of-type(1){ transform: rotate(22.5deg); }
fieldset:nth-of-type(2){ transform: rotate(67.5deg); }
fieldset:nth-of-type(3){ transform: rotate(112.5deg); }
fieldset:nth-of-type(4){ transform: rotate(157.5deg); }
fieldset:nth-of-type(5){ transform: rotate(-22.5deg); }
fieldset:nth-of-type(6){ transform: rotate(-67.5deg); }
fieldset:nth-of-type(7){ transform: rotate(-112.5deg); }
fieldset:nth-of-type(8){ transform: rotate(-157.5deg); }
legend{
	font: 15pt/11px 'Averia Serif Libre'; 
	background: white;
	margin: auto; 
	padding: 0 4px;
} 

body {
	user-select: none;
	-webkit-user-select: none;
}

External CSS

  1. https://fonts.googleapis.com/css2?family=Averia+Serif+Libre&amp;display=swap

External JavaScript

This Pen doesn't use any external JavaScript resources.