Anne Lee Anne Lee - 1 month ago 4
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


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="" />
  <div class="overlay">Some text here</div>