如何在 CSS 中建立不使用邊框的傾斜 Div？-css教學-PHP中文網

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

Susan Sarandon

發布： 2024-11-11 08:08:03

原創

272 人瀏覽過

How to Create a Slanted Div Without Using Borders in CSS?

不使用邊框建立傾斜的div

問題：

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

解：

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

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