Anne Lee Anne Lee - 2 months ago 17
CSS Question

How do you square off only one corner of a div to be transparent in CSS?

I'm trying to create a reusable widget. It will have some sort of background image, with a transparent text overlay. The background of the text overlay will be mostly square, but have one transparent corner. Is there an easy way to do this using CSS?

Example of what widget should look like

Answer

You can use linear-gradient background. Here is your reusable widget. Cheers!

img {
  display: block;
  width: 100%;
}
.img-widget {
  width: 250px;
  height: auto;
  position: relative;
}
.img-widget .overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 25%;
  background: transparent;
  text-align: center;
  background-image: linear-gradient(118deg, transparent 0%, transparent 10%, #7AAD7A 10%, #7AAD7A 60%);
  display: inline-block;
  vertical-align: middle;
}
.img-widget .overlay:after {
  display: inline-block;
  vertical-align: middle;
  content: '';
  height: 100%;
}
<div class="img-widget">
  <img src="http://placehold.it/200x200" />
  <div class="overlay">Some text here</div>
</div>

Comments