如何在不使用 border-corner-shape 的情況下在 CSS 中為區塊 div 建立斜角？

在 CSS 中實作區塊 div 的斜角

使用斜角設計區塊 div 的樣式可以透過多種方式完成。 CSS4 border-corner-shape 仍然是一個選項，但其實現仍懸而未決。因此，我們將深入研究使用 CSS3 變換的解決方案。

使用 CSS3 變換實作

在 HTML 文件中，使用所需的類別建立一個 div 元素區塊的名稱。

HTML:

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

在CSS 定義樣式，如下圖：

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);
}

此解決方案保持了原始邊框屬性不變，使其可用於進一步調整。如需實際演示，請參閱提供的 JSBin 演示。

使用Second Div

的替代解決方案

為了簡單起見，請考慮使用另一個CSS 實作來實現類似的結果沒有CSS3 的第二個div。請參閱前面提供的 CSS 中的 box2 類別。

以上是如何在不使用 border-corner-shape 的情況下在 CSS 中為區塊 div 建立斜角？的詳細內容。更多資訊請關注PHP中文網其他相關文章！