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

此方法创建一个倾斜边框，可以沿其长度显示文本。