'cut the overlapping CSS custom ribbon in the image div

Hello I just want to cut overlapping ribbon so that it would fit in the image div.

The excess portion of the top and the left ribbon would be could so that it would just fit in the div. (and at this point this description is getting reduntant to fill more text so I could post this question Thank you)

How would I do it?

.ribbon {
  background-color: #FBBC04;
  overflow: hidden;
  white-space: nowrap;
  /* top left corner */
  position: absolute;
  left: -50px;
  top: 40px;
  /* for 45 deg rotation */
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
  /* for creating shadow */
  -webkit-box-shadow: 0 0 10px #888;
  -moz-box-shadow: 0 0 10px #888;
  box-shadow: 0 0 10px #888;

  z-index: 2;

}
.ribbon a {
  border: 1px solid #faa;
  color: #fff;
  display: block;
  font: bold 100% "Helvetica Neue", Helvetica, Arial, sans-serif;
  margin: 1px 0;
  padding: 10px 50px;
  text-align: center;
  text-decoration: none;
  /* for creating shadow */
  text-shadow: 0 0 5px #444;
}

.img-inside {
  position: relative;
  width: 250px;
  padding: 10px;
  text-align: center;
}

.fit-image {
  width: 100%;
  object-fit: contain;
  height: 200px;
  /* only if you want fixed height */
}
<div class="img-inside">
  <img class="fit-image" src="https://material.angular.io/assets/img/examples/shiba2.jpg">
  <div class="ribbon"> <a href="#">Best doggo</a></div>
</div>
htmlcss


Solution 1:[1]

.ribbon {
  background-color: #FBBC04;
  overflow: hidden;
  white-space: nowrap;
  /* top left corner */
  position: absolute;
  left: -50px;
  top: 40px;
  /* for 45 deg rotation */
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
  /* for creating shadow */
  -webkit-box-shadow: 0 0 10px #888;
  -moz-box-shadow: 0 0 10px #888;
  box-shadow: 0 0 10px #888;

  z-index: 2;

}
.ribbon a {
  border: 1px solid #faa;
  color: #fff;
  display: block;
  font: bold 100% "Helvetica Neue", Helvetica, Arial, sans-serif;
  margin: 1px 0;
  padding: 10px 50px;
  text-align: center;
  text-decoration: none;
  /* for creating shadow */
  text-shadow: 0 0 5px #444;
}

.img-inside {
  position: relative;
  width: 250px;
 
  text-align: center;
  overflow:hidden
}

.fit-image {
  width: 100%;
  object-fit: contain;
  height: 200px;
  /* only if you want fixed height */
}
<div class="img-inside">
  <img class="fit-image" src="https://material.angular.io/assets/img/examples/shiba2.jpg">
  <div class="ribbon"> <a href="#">Best doggo</a></div>
</div>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Arezou Saremian

Related Questions