cut the overlapping CSS custom ribbon in the image div

March 9, 2022

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>

>Solution :

add overflow:hidden; padding: 0px; in class .img-inside and
make top: 30px; in class .ribbon

.ribbon {
  background-color: #FBBC04;
  overflow: hidden;
  white-space: nowrap;
  /* top left corner */
  position: absolute;
  left: -50px;
  top: 30px;
  /* 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: 0px;
  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>