斜线、角度控制答案

【问题标题】：Slanted slash, angle control斜线、角度控制
【发布时间】：2015-04-23 22:25:42
【问题描述】：

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

【问题讨论】：

请编辑您的问题，不太清楚。
添加了 CSS-shapes 标签以便更好地分类，将描述移到顶部并从标题中删除“使用 CSS”，因为 CSS 已经作为标签存在。谈到这个问题，虽然发布代码对于一个问题并不总是强制性的，但最好表明你是否尝试过任何东西，如果是的话，你遇到了什么问题。

【解决方案1】：

您可以使用一个元素并使用伪元素和边框（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;
}

&lt;div&gt;&lt;/div&gt;

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

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

【讨论】：

【解决方案2】：

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

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

&lt;span class="number"&gt;12&lt;/span&gt;

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

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

对于内容属性，您需要在 Unicode 表中找到您想要的特定“斜线”

【讨论】：

IE8 only supports the CSS 2.1 syntax 用一个分号表示伪元素
@web-tiki，非常感谢