<html>
<head>
<style>
:root {
--primary-color: white;
--background-color: #111;
}
html,body {
background-color: var(--background-color);
color: var(--primary-color);
font-family: Orbitron;
}
p {
margin: 0;
}
.tab {
clip-path: polygon(0 0, 0 100%, 100% 100%, 100% 25%, 75% 0);
clip-path: polygon(10% 0, 0 25%, 0 100%, 100% 100%, 100% 0);
background-color: var(--primary-color);
width: max-content;
min-width: 100px;
min-height: 50px;
padding: 4px 10px 4px 15px;
display: flex;
justify-content: right;
align-items: center;
}
.tab-text {
font-family: "Orbitron";
font-size: 2em;
color: var(--background-color);
text-transform: uppercase;
}
.line-container {
display: flex;
justify-content: flex-start;
margin-bottom: 10px;
margin-right: 10px;
width: max-content;
}
.line1 {
display: flex;
justify-content: center;
align-items: end;
border-bottom: 2px solid var(--primary-color);
width: max-content;
padding: 5px; 0px;
position: relative;
}
.line2 {
position: absolute;
border-bottom: 2px solid var(--primary-color);
width: 14px;
transform: rotateZ(37deg);
bottom: -5.5px;
right: -12px;
}
.line3 {
border-bottom: 2px solid var(--primary-color);
width: max-content;
padding: 5px; 0px;
translate: 9px 8px;
}
</style>
</head>
<body>
<div class="line-container">
<div class="line1">
<p>NETWORK</p>
<div class="line2"></div>
</div>
<div class="line3">
<div class="tab">
<span class="tab-text">101ms</span>
</div>
</div>
</div>
</body>
</html>
