How to cut box corner Using CSS with transparent background?

问题

I want to cut left top corner of a box using CSS like this.

keep in mind that background is transparent.

回答1:

Nearly the same solution as OriDrori's answer but more flexible (if you need fixed-width cutted corner).

This gradient will look the same regardless of .card width and height.

body {
  background: purple;
}

.card {
  width: 200px;
  height: 200px;
  background: linear-gradient(135deg, transparent 20px, white 20px);
}

<div class="card"></div>

回答2:

You can use a simple linear gradient for that:

body {
  background: purple;
}

.card {
  width: 200px;
  height: 200px;
  background: linear-gradient(to bottom right, transparent 5%, white 5%);
}

<div class="card"></div>

回答3:

You can use clip-path https://developer.mozilla.org/en/docs/Web/CSS/clip-path

and use something like this:

div#test{
	background:red;
	width:200px;
	height: 200px;
	-webkit-clip-path: polygon(22% 0, 100% 0, 100% 100%, 0 100%, 0 20%);
clip-path: polygon(22% 0, 100% 0, 100% 100%, 0 100%, 0 20%);
}

<div id="test"></div>

回答4:

With a pseudo and transform you can do that, and it has good browser support (from IE9)

body {
  background: url(https://picsum.photos/400/300) center / cover;
}

div {
  position: relative;
  width: 200px;
  height: 200px;
  overflow: hidden;
}

div::before {
  content: '';
  position: absolute;
  left: calc(50% + 25px);             /*  25px is height/width of the cut  */
  top: calc(50% + 25px);
  width: 141.5%;
  height: 141.5%;
  transform: translate(-50%,-50%)  rotate(45deg);
  background: #eee;
  opacity: 0.8;
}

<div></div>

As pointed out, if you need it to scale on different aspect ratio's, use this

body {
  background: url(https://picsum.photos/400/300) center / cover;
}

div {
  position: relative;
  width: 80vw;
  height: 80vh;
  overflow: hidden;
}

div::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 1000%;
  height: 5000%;
  transform: rotate(45deg) translate(25px,-50%);   /* 25px for the cut height/width */
  transform-origin: left top;
  background: #eee;
  opacity: 0.8;
}

<div></div>

来源：https://stackoverflow.com/questions/44994080/how-to-cut-box-corner-using-css-with-transparent-background

标签

css

Sass

rounded-corners

box