Reports

I do not understand what result is needed, something like this?

.slanted-container {
  --deg: 10deg;
  --radius: 10px;
}



.slanted {
  position: relative;
  border: 4px solid purple;
  width: 200px;
  height: 100px;
  transform: skew(var(--deg));
  border-radius: var(--radius);
  overflow: hidden;
}

.slanted2 {
  border: 4px solid purple;
  width: 200px;
  height: 100px;
  transform: skew(var(--deg));
  border-radius: var(--radius);
  overflow: hidden;
  background: url(https://www.esiteanalytics.com/wp-content/uploads/GeographicBarrierMedian.jpg);
  background-size: cover;
}

.slanted img {
  display: block;
  max-width: 100%;
}

<div class="slanted-container">
  <div class="slanted">
    <img src="https://www.esiteanalytics.com/wp-content/uploads/GeographicBarrierMedian.jpg" />
  </div>
  <div class="slanted2">

  </div>
</div>

79642330