Article preview component

Community feedback

• 

  Fernando Pérez•320

  @fermopPosted almost 2 years ago

  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

  1

  ---

  

  Immanuel•50

  @immachuks7Posted almost 2 years ago

  Thanks for the answer...

  1