Anne Lee Anne Lee - 1 year ago 104
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 Source

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>

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download