如何使用 CSS3 變換在區塊 Div 上實現斜角？

斜切塊Div 的角

挑戰

在包含類別為「block1」的區塊div 的HTML 文件中，目標是在div的右側創建一個斜角，如提供的圖像所示。

解決方案

要在不使用即將推出的 CSS4 border-corner-shape 的情況下實現此效果屬性，我們將 CSS3 轉換與基於位置的技術結合使用。

實現

HTML:

<code class="html"><div class="box">
  Text Content
</div></code>

CSS:

<code class="css">.box {
  width: 200px;
  height: 35px;
  line-height: 35px;
  padding: 0 5px;
  background-color: #ccc;
  padding-right: 20px;
  border: solid 1px black;
  border-right: 0;
  position: relative;
}

.box:after {
  content: "";
  display: block;
  background-color: #ccc;
  border: solid 1px black;
  border-left: 0;
  width: 35px;
  height: 35px;
  position: absolute;
  z-index: -1;
  top: -1px;
  right: -17.5px;
  transform: skew(-45deg);
  -o-transform: skew(-45deg);
  -moz-transform: skew(-45deg);
  -webkit-transform: skew(-45deg);
}</code>

說明

此實作包含以下技術：

• CSS3 轉換： 傾斜變換屬性套用於將附加的div 旋轉45 度。
• 絕對定位： 使用 top 和 right 屬性絕對定位附加的 div 以建立斜角。
• 負Z-Index： 附加的 div 被賦予負 z-index，使其位於原始 div 後面。
• 邊框操作： 原始 div 的 border-right 設定為零防止斜角邊緣出現第二個邊框。
• 填充修改：為了補償刪除的 1px 邊框，原始 div 的 padding-right 增加 1px。

以上是如何使用 CSS3 變換在區塊 Div 上實現斜角？的詳細內容。更多資訊請關注PHP中文網其他相關文章！