直通/穿透造型

Question

我正在开设一个网站，其中有一个服务页面，其中包含一些相应的商品。

由于网站是一个响应式布局，文本会根据正在查看的设备而改变...我正在寻找一种方法来创建HTML，CSS，JavaScript或类似的上述示例，而无需求助于使用jpg，png等图像

我发现很难创造这个，因为在这个角度上有一个直线，它是一个不同的颜色并控制它的厚度/重量。我能得到的最好的是它的父颜色的细线， 有什么建议？

Answer 1

有可能使用css3转换，当然没有IE支持，但你可以使用png作为旧浏览器的后备：

演示： http://jsbin.com/ejoguw/1/edit

span { position: relative; }
span:after {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    margin-top: -3px; /* height/2 */
    width: 100%;
    height: 7px; /* Adjust */
    background: red;
    -webkit-transform: rotateZ(-10deg);
    -moz-transform: rotateZ(-10deg);
}

Answer 2

在<s>中包含您的删除线价格，然后使用JS在所有<s>标签上提升绝对定位的PNG（显然，请关闭原生删除线样式）。如果PNG具有类似top: 0; right: 0; bottom: 0; left: 0;的内容，那么它将相应地缩放，并且看起来不应该太糟糕。没有JS的用户在语义上会看到同样的东西。