如何在 CSS 中建立不使用邊框的傾斜 Div？

不使用邊框建立傾斜的div

問題：

當以下情況時，使用邊框建立不可行div 放置在圖像上。如何使用響應式 CSS 建立傾斜邊緣？

解：

傾斜的偽元素可用於建立傾斜的背景。這種方法使文字不受變換操作的影響。實作方法如下：

1. 定位偽元素：
   在 div 中加入一個 :after 偽元素，絕對定位。
2. 定義傾斜：
   使用-webkit-transform: skew(-45deg);屬性（或其供應商前綴）將偽元素傾斜 45 度。
3. 設定變換原點：
   指定變換原點：100% 0；允許偽元素從右下角傾斜。
4. 隱藏溢位：
   增加溢位：隱藏；到偽元素以隱藏溢位的部分。
5. 堆疊在內容後面：
   在偽元素上使用負 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;
}

HTML：

<div>slanted div text</div>
<div>
  slanted div text<br>
  on several lines<br>
  an other line
</div>
<div>wider slanted div text with more text inside</div>

以上是如何在 CSS 中建立不使用邊框的傾斜 Div？的詳細內容。更多資訊請關注PHP中文網其他相關文章！