如何用css斜切

Posted 2023-03-05

技术标签:

【中文标题】如何用css斜切【英文标题】：How to strike through obliquely with css 【发布时间】：2013-01-13 15:27:04 【问题描述】：

我需要这样的东西：

如何用 css 实现这一点？我知道一种方法是使用背景图片，但我可以只使用没有任何图片的 css 来实现吗？

【问题讨论】：

【参考方案1】：

使用:before 伪元素有一种巧妙的方法可以做到这一点。你给 :before 一个边框，然后用 CSS 变换旋转它。这样做不会向 DOM 添加额外的元素，添加/删除删除线就像添加/删除类一样简单。

Here's a demo

注意事项

这仅适用于 IE8。 IE7 does not support :before，但是在确实支持 :before 但不支持 CSS 转换的浏览器中会正常降级。旋转角度是固定的。如果文本较长，则该行将不会触及文本的角落。请注意这一点。

CSS

.strikethrough 
  position: relative;

.strikethrough:before 
  position: absolute;
  content: "";
  left: 0;
  top: 50%;
  right: 0;
  border-top: 1px solid;
  border-color: inherit;
  
  -webkit-transform:rotate(-5deg);
  -moz-transform:rotate(-5deg);
  -ms-transform:rotate(-5deg);
  -o-transform:rotate(-5deg);
  transform:rotate(-5deg);

html

<span class="strikethrough">Deleted text</span>

【讨论】：

我不认为这适用于 IE8 .. 它没有我所知道的 transform 的任何类似物，除非它可以与 filter 一起使用你是对的，对不起。 IE8 将优雅地降级为正常的删除线。我应该说清楚嗨@Bojangles，我正在尝试将此应用于TD元素，但在Firefox中似乎有点错误..jsfiddle.net/Ms4Qy知道为什么会这样吗？谢谢当然 - 完成：***.com/questions/18945031/… 另一个需要考虑的警告 - 如果您的文本分成两行，删除线将无法按预期呈现：d.pr/i/1dKP5【参考方案2】：

您可以使用背景linear-gradient 和currentColor 来避免硬编码字体颜色：

.strikediag 
  background: linear-gradient(to left top, transparent 47.75%, currentColor 49.5%, currentColor 50.5%, transparent 52.25%);

.withpadding 
  padding: 0 0.15em;

The value is <span class="strikediag">2x</span> 3x<br>
The number is <span class="strikediag">1234567890</span>.
<p>
The value is <span class="strikediag withpadding">2x</span>3x<br>
The number is <span class="strikediag withpadding">1234567890</span>.

如果您不需要元素完全内联，您可以使用伪元素将行放置在元素顶部。这样可以通过改变伪元素的大小来调整角度：

.strikediag 
  display: inline-block;
  position: relative;

.strikediag::before 
  content: '';
  position: absolute;
  left: -0.1em;
  right: -0.1em;
  top: 0.38em;
  bottom: 0.38em;
  background: linear-gradient(to left top, transparent 45.5%, currentColor 47.5%, currentColor 52.5%, transparent 54.5%);
  pointer-events: none;

The value is <span class="strikediag">2x</span> 3x<br>
The number is <span class="strikediag">1234567890</span>.

【讨论】：

【参考方案3】：

del 
  position:relative;
  text-decoration:none;

del::after 
  content:"";
  position:absolute;
  top:50%; left:0; width:100%; height:1px; 
  background:black;
  transform:rotate(-7deg);

【讨论】：

【参考方案4】：

我认为您可以将旋转效果应用于水平规则。比如：

<html>
  <body>
    <hr />
    123456
  </body>
</html>

使用 CSS：

hr

  width: 50px;
  position: absolute;
  background-color: #000000;
  color: #000000;
  border-color: #000000;
  transform:rotate(-7deg);
  -ms-transform:rotate(-7deg);
  -moz-transform:rotate(-7deg);
  -webkit-transform:rotate(-7deg);
  -o-transform:rotate(-7deg);

Fiddle

不过，您的里程可能会因浏览器和版本而异，所以我不确定是否会求助于此。例如，您可能需要编写一些时髦的 VML 代码来支持旧版本的 IE。

【讨论】：

注1：-7度，不是+7；注 2：HR 在 Chrome 中为灰色；可以覆盖吗？那么所有不支持 CSS3 转换的浏览器呢？是的，我相信您需要设置border-color 和background-color。 Updated Fiddle【参考方案5】：

从上面增强 Bojangles 答案：

.strike-diagonal-price 
position: relative;
background-color: black;
color: white;

.strike-diagonal-price:before 
position: absolute;
content: "";
left: 0;
top: 45%;
right: 0;
border-top: 2px solid;
border-color: red;
-webkit-transform: rotate(-25deg);
-moz-transform: rotate(-25deg);
-ms-transform: rotate(-25deg);
-o-transform: rotate(-25deg);
transform: rotate(-25deg);

现在我得到了我需要的效果：

【讨论】：

【参考方案6】：

CSS3 渐变

background-image: linear-gradient(left bottom, rgb(234,20,136) 0%, rgb(255,46,164) 50%, rgb(255,74,197) 0%);
background-image: -o-linear-gradient(left bottom, rgb(234,20,136) 0%, rgb(255,46,164) 50%, rgb(255,74,197) 0%);
background-image: -moz-linear-gradient(left bottom, rgb(234,20,136) 0%, rgb(255,46,164) 50%, rgb(255,74,197) 0%);
background-image: -webkit-linear-gradient(left bottom, rgb(234,20,136) 0%, rgb(255,46,164) 50%, rgb(255,74,197) 0%);
background-image: -ms-linear-gradient(left bottom, rgb(234,20,136) 0%, rgb(255,46,164) 50%, rgb(255,74,197) 0%);

background-image: -webkit-gradient( linear, left bottom,right top,color-stop(0, rgb(234,20,136)), color-stop(0.5, rgb(255,46,164)), color-stop(0, rgb(255,74,197)) );

我的示例无法完美满足您的需求，但有关更多信息和有趣的调整，请参阅 http://gradients.glrzad.com/。

您需要做的是创建white-black-white 的background-gradient 并将您的opacity 定位在48% 50% 52% 之类的位置。

【讨论】：

这给了我块，而不是行。【参考方案7】：

这是一个老问题，但作为替代方案，您可以使用 CSS3 线性渐变，例如 (http://codepen.io/yusuf-azer/pen/ojJLoG)。

用于广泛的解释和 LESS 解决方案检查

http://www.yusufazer.com/tutorials-how-to/how-to-make-a-diagonal-line-through-with-css3/

span.price--line-through 
  background-color: transparent;
  background-image: -webkit-gradient(linear, 19.1% -7.9%, 81% 107.9%, color-stop(0, #fff), color-stop(.475, #fff), color-stop(.5, #000), color-stop(.515, #fff), color-stop(1, #fff));
  background-image: -webkit-repeating-linear-gradient(287deg, #fff 0%, #fff 47.5%, #000 50%, #fff 51.5%, #fff 100%);
  background-image: repeating-linear-gradient(163deg, #fff 0%, #fff 47.5%, #000 50%, #fff 51.5%, #fff 100%);
  background-image: -ms-repeating-linear-gradient(287deg, #fff 0%, #fff 47.5%, #000 50%, #fff 51.5%, #fff 100%);

【讨论】：

【参考方案8】：

我认为没有可持续的 CSS 解决方案。

我的纯 CSS 解决方案是在您的第一个文本元素后面放置另一个文本元素，该元素的字符数（字符为 ' '）是相同的（字符为 ' '）、换行的文本删除和旋转的变换。

类似：

<html>
  <head>
    <style>
      .strike
       text-decoration: line-through;
      -webkit-transform: rotate(344deg);
      -moz-transform: rotate(344deg);
      -o-transform: rotate(344deg);
    </style>
  </head>
  <body>
    <p>Text to display</p>
    <p class='strike'></p>
  </body>
</html>

Text Rotation example

我期待看到其他用户提供更好的答案。

【讨论】：

【参考方案9】：

我在 HTM 中使用带有 CSS 类的 SVG 来做到这一点：

HTML：

<ul>
<li>Regular Price: <div class="zIndex-10a">$4.50</div><div class="zIndex-10b"><svg  ><line x1="0" y1="20" x2="40" y2="0" class="Strike-01a"></svg></div></li>
</ul>

CSS：

/* -- CONTAINS TEXT TO STRIKE ---- */ .zIndex-10a  display: inline-block; position: relative;  left:  0px; z-index: 10; 
/* -- CONTAINS SVG LINE IN HTML -- */ .zIndex-10b  display: inline-block; position: relative; right: 40px; z-index: 11; 
/* -- SVG STROKE PROPERTIES ------ */ .Strike-01a  stroke: rgb(255,0,0); stroke-width:2;

现在可能有更简单的方法。我只是在紧要关头为我的产品详细信息特价页面做了这个。希望它可以帮助某人。

【讨论】：

一定是缺少一些东西，因为在 sn-p as-is 中这不起作用【参考方案10】：

试试

.mydiv 
    background-color: #990000;
    color: #FFFF00;
    font-size: 2em;
    padding-top: 10px;
    padding-bottom: 10px;
    border-radius: 15px;
    max-width: 300px;
    width: 100%;

.strikethrough-100p, .strikethrough-50p
  position: relative;
 text-align: center;

.strikethrough-100p:before 
  position: absolute;
  content: "";
  left: 0;
  top: 50%;
  right: 0;
  border-top: 3px solid;
  border-color: inherit;

  -webkit-transform:rotate(-5deg);
  -moz-transform:rotate(-5deg);
  -ms-transform:rotate(-5deg);
  -o-transform:rotate(-5deg);
  transform:rotate(-5deg);

.strikethrough-50p:before 
  position: absolute;
  content: "";
  width:50%;
  left: 25%;
  top: 50%;
  right: 0;
  border-top: 3px solid;
  border-color: inherit;

  -webkit-transform:rotate(-5deg);
  -moz-transform:rotate(-5deg);
  -ms-transform:rotate(-5deg);
  -o-transform:rotate(-5deg);
  transform:rotate(-5deg);

<div class="mydiv">
<div class="strikethrough-100p">123456</div>
</div>
<br>
<div class="mydiv">
<div class="strikethrough-50p">123456</div>
</div>

【讨论】：

【参考方案11】：

这是一个花哨的版本：

background:none repeat scroll 0 0 rgba(255, 0, 0, 0.5);
-moz-border-radius:20px 0;
-webkit-border-radius:20px 0;
border-radius:20px 0;
content: "";
height:5px; left:-5%;
position:absolute;
top:30%;
-moz-transform:rotate(-7deg);
-webkit-transform:rotate(-7deg);
transform:rotate(-7deg);
transform-origin:50% 50% 0;
width:110%;

【讨论】：

以上是关于如何用css斜切的主要内容，如果未能解决你的问题，请参考以下文章

div+css如何用百分比？？

如何用css动态控制footer的位置

请问如何用CSS固定页面大小

如何用 jQuery “替换” css 属性

如何用CSS让文字居于div的底部

如何用纯javascript修改html css dom？ [关闭]