@fermop
Posted
Hi Machuks, how are you?
Answering to your question you can make the triangle by doing the following:
HTML
<div class="card__socials">
<p class="card__socials__text">Share</p>
<img>
<img>
<img>
<div class="triangle"></div>
</div>
CSS
.card__socials {
position: absolute;
display: flex;
justify-content: center;
align-items: center;
}
@media(min-width: 887px) {
.triangle {
width: 1.125rem;
height: 1.125rem;
background-color: hsl(217, 19%, 35%);
transform: rotate(45deg);
position: absolute;
bottom: -0.5rem;
}
}
In this code, the container of the socials has a position: absolute
and css flex with justify-content: center;
. If any of its children has a position: absolute
it will be positioned according to its parent's properties, in this case, it'll be centered because of css flex and positioned to it because of its parent's position property.
The triangle is because if you make a rotated square 45 degres with 18px width and height you'll have like a diamond shape, you'll only need to position it with the bottom
property to make from its half part to top disappear. It's important to point out that it has to be styled on a media querie on responsive design, this way it will not be visible at mobile design.
Hope it helps, feel free to see my solution to understand better this part, any question we can get in touch!
Marked as helpful
@immachuks7
Posted
Thanks for the answer...