cut the overlapping CSS custom ribbon in the image div-CodePudding

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 >
  <img  src="https://material.angular.io/assets/img/examples/shiba2.jpg">
  <div > <a href="#">Best doggo</a></div>
</div>

CodePudding user response：

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 >
  <img  src="https://material.angular.io/assets/img/examples/shiba2.jpg">
  <div > <a href="#">Best doggo</a></div>
</div>

CodePudding user response：

.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 >
  <img  src="https://material.angular.io/assets/img/examples/shiba2.jpg">
  <div > <a href="#">Best doggo</a></div>
</div>