I am trying to create a text box that is a box of text. The text needs to have a border around it and, then have an opaque background. The box is created using a clip-path and for some reason “border” itself doesn’t follow the clip-path so had to use a filter drop-shadow to create the border. However, because that border is set so that the box continues along the outside, making the border look like it’s inset and that there is padding I place it inside another clip-path box.

I need it to be opaque and, everything I’ve thought of trying, doesn’t work.

    <div class="box">
            <div class="box__shaped">
              <div class="box__shaped__inner">
                <div class="box__shaped__text">
                  Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
                </div>
              </div>
            </div>
          </div>

and the SCSS

%boxContent {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-size: cover;
  z-index: -1;
  clip-path: polygon(5% 0, 100% 0, 100% 95%, 95% 100%, 0 100%, 0 5%);
}

.box {
  position: relative;
  text-align: center;
  width: 95%;
  max-width: 45rem;
  margin: 0 auto;

  &__shaped {
    display: inline-block;
    padding: 10px;

    &:before {
      @extend %boxContent;
      background: linear-gradient(
        to bottom right,
        rgba($color-box-dark, 0.7) 0%,
        rgba($color-box-light, 0.7) 40%,
        rgba($color-box-light, 0.7) 60%,
        rgba($color-box-dark, 0.7) 100%
      );
    }

    &__inner {
      display: inline-block;
      width: 100%;
      padding: 25px;
      filter: drop-shadow(0px 2px 0px $color-box-border)
        drop-shadow(2px 0px 0px $color-box-border)
        drop-shadow(0px -2px 0px $color-box-border)
        drop-shadow(-2px 0px 0px $color-box-border);

      &:before {
        @extend %boxContent;
        background: linear-gradient(
          to bottom right,
          rgba($color-box-dark, 0.9) 0%,
          rgba($color-box-light, 0.9) 40%,
          rgba($color-box-light, 0.9) 60%,
          rgba($color-box-dark, 0.9) 100%
        );
      }
    }
  }
}

Have played around with this for a couple of days and can’t figure out a better solution.