如何剪切框角使用具有透明背景的CSS？

Question

我想用这样的CSS剪切一个方框的左上角。

请记住，背景是透明的。

Answer 1

与OriDrori's answer几乎相同的解决方案，但更灵活（如果您需要固定宽度的切角）。

无论.card width和height如何，此渐变看起来都相同。

body {
  background: purple;
}

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

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

Answer 2

您可以使用简单的linear gradient：

body {
  background: purple;
}

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

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

Answer 3

您可以使用剪辑路径 https://developer.mozilla.org/en/docs/Web/CSS/clip-path

并使用以下内容：

＆＃13;

＆＃13;

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%);
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 4

使用伪和transform你可以做到这一点，并且它具有良好的浏览器支持（来自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>

正如所指出的，如果您需要在不同的宽高比上进行缩放，请使用此

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>