如何使用 CSS3 變換在區塊 div 上實現斜角？-css教學-PHP中文網

首頁

web前端

css教學

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

Patricia Arquette

Oct 28, 2024 pm 02:55 PM

How do you achieve beveled corners on a block div using CSS3 transforms?

使用CSS3 對區塊Div 的角進行倒角

在CSS4 的border-corner 之前，在塊曾經div 上實現斜角塊是一個挑戰-形狀屬性。然而，透過 CSS3 轉換，我們可以創建這種效果，同時保留邊框屬性以供將來使用。

讓我們檢查一下HTML 結構和CSS 樣式以建立斜角：

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; /* pull it up because of 1px border */
  right: -17.5px; /* 35px / 2 */
  transform: skew(-45deg);
  -o-transform: skew(-45deg);
  -moz-transform: skew(-45deg);
  -webkit-transform: skew(-45deg);
}</code>

登入後複製

CSS

CSSCSSCSS在CSS 程式碼中，我們使用偽元素來建立斜角。這個偽元素是絕對定位的，並且具有負 z 索引，以確保它位於主 div 後面。 skew() 變換用於旋轉角。需要注意的是，border-right 屬性設定為 0 以創造斜角的錯覺。偽元素的 border-left 屬性也設定為 0，以確保視覺上乾淨的角落。此技術有效地為區塊 div 添加斜角，從而實現更具視覺吸引力的設計。

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

本網站聲明

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn