主页 / 问题 / 1472681
Accepted
Mcile
Asked:2022-11-30 21:41:33 +0800 CST2022-11-30 21:41:33 +0800 CST

在 css 中对角线划线价格

  • 772

带价格的字段总是长短不一，对角线的角度会不断变化。让它成为纯CSS

css

1 个回答

  1. Best Answer

    解决方案是将 ::after 伪元素与背景叠加为 svg。svg 可以直接插入到 css 示例中

    .old-price{
  position: relative;
  display: inline-block;
}
.old-price::after{
  content: '';
        position: absolute;
        left: 0;
        top:0;
        right: 0;
        bottom: 0;
        width: 100%;
        height: 100%;
        background-image: url('data:image/svg+xml;utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22100%25%22%20height%3D%22100%25%22%3E%0A%20%20%20%20%3Cline%20x1%3D%220%22%20y1%3D%22100%25%22%20x2%3D%22100%25%22%20y2%3D%220%22%20stroke%3D%22%23F00%22%20stroke-width%3D%222%22%2F%3E%0A%3C%2Fsvg%3E');
        background-size: cover;
}
    <div><div class="old-price">1 000 р</div></div>
<div><div class="old-price">100 р</div></div
<div><div class="old-price">100 000 р</div></div

    插入 svg - 它需要由 UrlDecoder解码

    如果你想改变线条的粗细和颜色，我会为你附上一个 svg

    <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">
    <line x1="0" y1="100%" x2="100%" y2="0" stroke="#F00" stroke-width="2"/>
</svg>
    • 2

相关问题