倾斜的斜线，角度控制

Question

如何使用CSS实现这个斜角（/）？它应该是响应式的，还应该支持IE 8吗？

Answer 1

您可以使用元素并使用伪元素和边框隐藏不需要的部分（IE8支持这些部分）：

＆＃13;

＆＃13;

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

＆＃13;

<div></div>

＆＃13;

＆＃13;

＆＃13;

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

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

Answer 2

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

＆＃13;

＆＃13;

.number::before {content:"\2215"}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

唯一的区别是，你必须使用::before和一个用于IE8的分号:before

IE8支持CSS :before Pseudo selector和CSS content property。

对于内容属性，您需要找到特定的＆＃34;斜杠＆＃34;你想要的，在Unicode表

中