In an attempt to utilize CSS3 for creating shapes and aligning them to resemble a certain image, I have successfully crafted a pink square along with 4 gray rectangles. Initially, my approach involved creating separate div elements for each shape and adjusting their margins and rotations accordingly. However, this method seems like hard coding in CSS, which may not be considered best practice.
#pinkBlock {
width: 100px;
height: 100px;
background-color: #FFC0CB;
left: 10px;
top: 10px;
}
#upRect {
width: 50px;
height: 200px;
background-color: #D3D3D3;
}
#downRect {
width: 50px;
height: 200px;
background-color: #D3D3D3;
}
#leftRect {
width: 50px;
height: 200px;
background-color: #D3D3D3;
}
#rightRect {
width: 50px;
height: 200px;
background-color: #D3D3D3;
}
Currently, I have the 4 gray rectangles stacked on top of one another with the pink block positioned at the bottom. What steps should I take to ensure that the gray rectangles touch each other's tips while retaining the pink block in the center?