如何使用傾斜偽元素在 Div 上實現傾斜邊緣？

在Div 上建立傾斜邊緣

簡介

使用CSS 在div 上實現傾斜邊緣可能具有挑戰性，尤其是當目標是響應式解決方案。這個主題之前已經討論過，但讓我們探索一種替代方法。

使用傾斜的偽元素

要創建傾斜的背景，我們可以使用傾斜的偽元素。這使我們能夠保持文字不受transform屬性的影響。

transform origin屬性將偽元素的傾斜定位在右下角，而overflow:hidden;隱藏溢出的部分。最後，負 z 索引將偽元素放置在 div 內容後面。

CSS 實作

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>

以上是如何使用傾斜偽元素在 Div 上實現傾斜邊緣？的詳細內容。更多資訊請關注PHP中文網其他相關文章！