Is there anyone out there who can assist me in creating this logo using CSS?
View the image of the logo here
I initially attempted to make a square with width and height, followed by experimenting with pseudo elements. However, I hit a roadblock because pseudo elements can only be used twice - once before and once after - which limited my options.
Although this second approach demonstrates an alternative method, it is not ideal as it lacks reusability and the lines become misaligned when zoomed in. You can see the code in action on this JSFiddle link.
* {
box-sizing: border-box;
}
.container {
margin: auto;
background-color: green;
max-width: 1400px;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
.rectangle {
height: 40px;
width: 40px;
border: 3px solid yellow;
transform: rotate(45deg);
position: relative;
}
.first-line {
position: absolute;
content: "";
width: 20px;
height: 20px;
left: 100%;
top: 100%;
transform: translateY(-100%);
border-top: 3px solid yellow;
}
.second-line {
position: absolute;
content: "";
width: 20px;
height: 20px;
top: 0%;
left: 0%;
transform: translateX(-100%);
border-bottom: 3px solid yellow;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="css/style.css" />
<title>Web Design | Mike Taylor</title>
</head>
<body>
<!-- Main header -->
<section class="main-header">
<div class="container">
<div class="rectangle">
<div class="first-line"></div>
<div class="second-line"></div>
</div>
</div>
</section>
<!-- End Main header -->
</body>
</html>