如何為 Div 創建響應式傾斜邊緣而不遮擋底層影像？

為Div 建立響應式傾斜邊緣

問題：

在不使用邊框的情況下為div 建立傾斜邊緣這將掩蓋底層

解決方案：

傾斜的偽元素：

利用傾斜的偽元素創建傾斜的背景，同時保留上面的文字內容

變換原點：

將偽元素的變換原點設定為所需的傾斜錨點（在本例中為右下角）。

傾斜變換：

應用對偽元素進行傾斜變換以相應地調整其角度（例如-45度）。

溢位：

使用溢位：隱藏；隱藏偽元素的任何溢位部分。

負 Z 索引：

使用負 z 索引將偽元素放置在 div 內容後面。

範例程式碼：

div {
  position: relative;
  display: inline-block;
  padding: 1em 5em 1em 1em;
  overflow: hidden;
  color: #fff;
}

div:after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #000;
  -webkit-transform-origin: 100% 0;
  -ms-transform-origin: 100% 0;
  transform-origin: 100% 0;
  -webkit-transform: skew(-45deg);
  -ms-transform: skew(-45deg);
  transform: skew(-45deg);
  z-index: -1;
}

body {
  background: url('https://farm3.staticflickr.com/2878/10944255073_973d2cd25c.jpg');
  background-size: cover;
}

結果：

此解決方案讓您能夠為div 建立響應式傾斜邊緣，而不會影響其文字內容。

以上是如何為 Div 創建響應式傾斜邊緣而不遮擋底層影像？的詳細內容。更多資訊請關注PHP中文網其他相關文章！