3

我正在一个网站上工作，该网站有一个服务页面，其中包含一些相应定价的项目。

价格

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

我发现很难创建这个，因为在角度上有一条直线，它是一种不同的颜色并控制它的厚度/重量。我能得到的最好的是一条带有其父颜色的细线，任何建议?

4

2 回答 2

4

可以使用 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);
}
于 2012-10-08T03:22:00.263 回答
2

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

于 2012-10-08T03:13:39.193 回答