problem when creating a triangle in after da div with css

Question

staff needed to create a triangle in my :after of my div however this Shape would have to be 100% wide I made a triangle Shape but it is with fixed width and this can not because in mobile it gets bad and when the site opens in bigger screens it gets crooked follow prints of what I did with the code:

Css that creates the triangle:

#lp-pom-block-875{
    position: relative;
  }

  #lp-pom-block-875:after{
    content: '';
    display: block;
    position: absolute;
    top: -60px;
    left: 0;
    width: 100%;
    height: 0;
    border-left: 680px solid transparent;
    border-right: 680px solid transparent;
    border-bottom: 60px solid #f9f0e9;
  }

NOTE: Notice that in the images I showed the triangle does not fit by the fixed size and I do not know how to give a size of 100%;

Answer 1

You can’t use position Absolute, or you lose responsiveness. This width 100%, does not work with position Absolute.

Daria para tentar usar media queries ou teria de mudar para relative e ajustar na tela.