Jak wyciąć pudełko Za pomocą CSS z przezroczystym tłem?

Question

Chcę wyciąć lewy górny róg pola za pomocą CSS w ten sposób.

pamiętać, że tło jest przezroczyste.

Answer 1

Prawie takie samo rozwiązanie jak OriDrori's answer ale bardziej elastyczne (jeśli potrzeba stałej szerokości skróconych rogu).

Ten gradient będzie wyglądać tak samo niezależnie od .cardwidth i height.

body { 
 
    background: purple; 
 
} 
 

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

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

Answer 2

Można użyć prostego linear gradient na to:

body { 
 
    background: purple; 
 
} 
 

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

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

Answer 3

Można użyć klipu-path https://developer.mozilla.org/en/docs/Web/CSS/clip-path

i używać coś takiego:

div#test{ 
 
\t background:red; 
 
\t width:200px; 
 
\t height: 200px; 
 
\t -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 4

Z pseudo i transform można zrobić, i ma dobre wsparcie przeglądarki (od 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>

---

Jak podkreślił, jeśli trzeba Aby skalować na różnych proporcjach, użyj tego

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>