Sunnyide agency project

Community feedback

• 

  imad•3,330

  @imadvvPosted about 2 years ago

  Greeting kellyc!! Congratulations for completing Your challenge!, 👏👏👏

  it seem like the classic way to create a triangle with CSS, is to use border, The idea is a box with zero width and height. The actual width and height of the arrow is determined by the width of the border. for example the bottom border and right border is colored while the left and top are transparent, which forms the triangle as showing on the design.

     border-top: 1.5rem solid transparent;
      border-left: 1.5rem solid transparent;
      border-right: 1rem solid white;
      border-bottom: 2rem solid white;
  
  

  if you need some reference you can check out my solution here I solve it with this approach, and for more information you can check out this article.

  over all, Hope this help!!

  Happy Codding, Have a Good Day.Night

  Marked as helpful

  1
• 

  Enmanuel Otero Montano•2,155

  @Enmanuel-Otero-MontanoPosted about 2 years ago

  Hi Kellyc!

  You should use the after or before pseudo-elements as you see fit and apply the following styles. I leave you a sample.

  .header__nav::before {
      content: "";
      position: absolute;
      top: -35px;
      right: 0;
      border-right: 35px solid hsl(0, 0%, 100%);
      border-top: 35px solid transparent;
      border-left: 35px solid transparent;
  }
  

  ::after

  ::before

  That is a sample of my code, you must adapt it to your code.

  Cheers!

  Marked as helpful

  0