722 caracteres em 01/05/2024.
<div class=quadrado></div>
<div class=retangulo></div>
<div class=circulo></div>
<style>
body {
background-color: #222730;
}
.quadrado {
z-index: 2;
position: absolute;
top: 25px;
left: 75px;
width: 150px;
height: 150px;
transform: rotate(45deg);
border: 50px solid #222730;
border-radius: 1px;
background-color: #4CAAB3;
}
.retangulo {
z-index: 1;
position: absolute;
top: 75px;
left: 0px;
width: 100%;
height: 150px;
background-color: #4CAAB3;
}
.circulo {
z-index: 3;
position: absolute;;
top: 125px;
left: 175px;
width: 50px;
height: 50px;
border-radius: 30px;
background-color: #393E46;
}
</style>
Revisar: o uso da declaração
border-radius: 1px;
no seletor.quadrado
foi a solução encontrada pra resolver o problema de uma borda indesejada que estava sendo renderizada incorretamente.