如何使用 CSS3 變換在 Div 元素上達到斜角效果？

如何使用CSS3 轉換在Div 元素上建立斜角

問題：

考慮一個HTML 文檔具有直邊框的div 元素。我們如何修改其樣式以實現如下圖所示的斜角？

[帶有斜角的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>

此技術涉及建立一個三角形的div 元素，並透過轉換後的傾斜和絕對定位來實現斜角效果。請注意，HTML 和 CSS 中還包含一個帶有「box2」類別的附加 div 元素，這說明了一種不使用 CSS3 聲明的替代方法。

以上是如何使用 CSS3 變換在 Div 元素上達到斜角效果？的詳細內容。更多資訊請關注PHP中文網其他相關文章！