在 CSS 框上建立斜角

可以使用多種方法在 CSS 框上實現斜角。一種方法描述如下：

使用邊框的方法

此技術依賴於沿容器左側建立透明邊框和沿底部建立傾斜邊框。以下程式碼示範如何實現：

Hello World

.cornered {
  width: 160px;
  height: 0px;
  border-bottom: 40px solid red;
  border-right: 40px solid white;
}
.main {
  width: 200px;
  height: 200px;
  background-color: red;
}

這將產生一個左上角傾斜 45 度角的框框。

使用透明度的替代方法

To為了允許傾斜部分內有文本，可以使用額外的透明邊框。下面修改後的程式碼說明了這個方法：

  
It's possible to put text up here too
    but if you want it to follow the slant you have to stack
    several of these.
  
Hello hello hello hello
hello hello hello hello hello

.outer {
    background-color: #ccffff;
    padding: 10px;
    font-size: x-small;
}
.cornered {
    width: 176px;
    height: 0px;
    border-bottom: 40px solid red;
    border-left: 40px solid transparent;
}
.main {
    width: 200px;
    height: 200px;
    background-color: red;
    padding: 0 8px;
}

此方法建立一個傾斜邊框，可以沿其長度顯示文字。