Làm thế nào để cắt góc hộp Sử dụng CSS với nền trong suốt?

Question

Tôi muốn cắt góc trên cùng bên trái của một hộp bằng cách sử dụng CSS như thế này.

hãy nhớ rằng nền trong suốt.

Answer 1

Gần giải pháp tương tự như OriDrori's answer nhưng linh hoạt hơn (nếu bạn cần góc cố định chiều rộng cutted).

Độ dốc này sẽ giống nhau bất kể .cardwidth và height.

body { 
 
    background: purple; 
 
} 
 

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

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

Answer 2

Bạn có thể sử dụng một đơn giản linear gradient cho rằng:

body { 
 
    background: purple; 
 
} 
 

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

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

Answer 3

Bạn có thể sử dụng kẹp-path https://developer.mozilla.org/en/docs/Web/CSS/clip-path

và sử dụng một cái gì đó như thế này:

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

Với giả và transform bạn có thể làm điều đó, và nó có hỗ trợ trình duyệt tốt (từ 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>

---

Như đã chỉ ra, nếu bạn cần nó để mở rộng tỷ lệ khung hình khác nhau, sử dụng số này

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>