斜线，角度控制

Question

如何使用 CSS 实现斜斜线 (/)？它应该是响应式的并且还应该支持 IE 8？

Answer 1

如果您想使用 CSS 创建内容，您必须使用 CSS 内容属性并且您必须使用 ::before 选择器将其应用于 CSS 属性。这是示例

.number::before {content:"15"}

<span class="number">12</span>

唯一不同的是，IE8 :before

必须使用 ::before 加一个分号

IE8 同时支持 CSS :before Pseudo selector,and CSS content property.

对于内容属性，您需要在 Unicode table

中找到您想要的特定 "slash"

Answer 2

可以使用一个元素，用伪元素和边框隐藏不需要的部分（IE8支持）：

div{
    position:relative;
    width: 100px; height: 100px;
    background: #000;
}
div:before, div:after{
    content: '';
    position: absolute;
}
div:before{
    top: 0; left: 0;
    border-left: 99px solid #fff;
    border-bottom: 99px solid transparent;
}
div:after{
    bottom: 0; right: 0;
    border-right: 99px solid #fff;
    border-top: 99px solid transparent;
}

<div></div>

您可以通过更改伪元素的边框宽度来控制倾斜度。有关其工作原理的解释，请参见此处：How do CSS triangles work?

尽管由于纯色三角形无法在图像或渐变上实现，但可以 responsive。

斜线，角度控制

Slanted slash, angle control

css

responsive-design

css-shapes