如何使用 CSS3 變換在區塊 Div 上建立斜角？-css教學-PHP中文網

如何使用 CSS3 變換在區塊 Div 上建立斜角？

Patricia Arquette

發布： 2024-10-28 04:12:30

原創

717 人瀏覽過

How to Create Beveled Corners on a Block Div Using CSS3 Transforms?

在區塊 Div 上設定斜角樣式

在提供的 HTML 文件中，定義了具有實線邊框的標準區塊 div。目標是在 div 的右側建立斜角效果。

要使用 CSS3 實現此效果，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 作為.box 的after 元素。該 div 絕對位於 .box 元素上方，並透過傾斜變換來創建斜角效果。

有關進一步說明，請參閱答案中提供的 JSBin 演示。請注意，該範例還包含另一個 div 類別 (box2)，它演示了無需 CSS3 聲明的替代實作。

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