如何在透明背景下使用 CSS 切割框角？

Question

我想像这样使用 CSS 剪切框的左上角。

请记住背景是透明的。

Answer 1

您可以为此使用一个简单的 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 2

你可以使用clip-path https://developer.mozilla.org/en/docs/Web/CSS/clip-path

并使用这样的东西：

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>

Answer 3

使用伪和 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>

Answer 4

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

无论 .card width 和 height.

，此渐变看起来都一样

body {
  background: purple;
}

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

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

如何在透明背景下使用 CSS 切割框角？

How to cut box corner Using CSS with transparent background?

css

sass

rounded-corners

box