嘗試在CSS中重現與傾斜邊距的裁剪效果

Question

在上面的源代碼中找不到答覆。

---

Effect to Reproduce

貌似兩個堆疊的對象（img & div）與一種切片和佈置在頂部。請注意文字也沿着切片的傾斜邊緣。我應該使用什麼來獲得對角線切片，以及我應該使用什麼來實現傾斜邊緣？

---

我懷疑我需要使用夾路徑或clipPath，但不知道如何實現基於圖像或DIV，取其裁剪的具體幾何形狀的多邊形剪輯。

Answer 1

結帳shape-outside css屬性使文本遵循傾斜邊距。 read more here

.element { 
    float: left; 
    shape-outside: circle(50%); 
    width: 200px; 
    height: 200px; 
} 

您可以使用clip-path來裁剪圖像。 Read more here

img { 
    width: 200px; 
    height: 200px; 
    background: url('/path/to/image') center no-repeat; 
    clip-path: polygon(0% 100%, 100% 100%, 0% 0%); 
}