I am building a Next.Js app and would like an image in a triangle shape on one of my pages. I can make a triangle but I can’t see the image.

My image is in my public directory. I am using Next App Router.

Here is my CSS

.expertise-content {
  position: relative;
}

.image-section {
  position: relative;
  height: 200px; 
}

.triangle-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  border-left: 100px solid transparent; 
  border-right: 100px solid transparent; 
  border-bottom: 200px solid transparent; 
  transform: rotate(-90deg); 
  background-image: url('/Water-Engineer-Clipboard.jpg'); 
  background-size: cover; 
  background-position: center; 
}

I am importing the CSS classname as follows into my component:

      <li className="mb-6">
          <div className="image-section">
            <div className="triangle-image"></div>
          </div>
        </li>