How to strike through obliquely with css

2楼-- · 2020-01-27 00:29

I did it this way using an SVG in the HTM with a CSS class:

HTML:

<ul>
<li>Regular Price: <div class="zIndex-10a">$4.50</div><div class="zIndex-10b"><svg height="16" width="5"><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; }

There might be simpler easier ways by now. I just cooked this up in a pinch for my product detail special offer page. Hope it helps someone.

0人赞添加讨论(0) 举报

老娘就宠你

3楼-- · 2020-01-27 00:34

You can use background linear-gradient with currentColor to avoid hardcoding font color:

.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>.

If you don't need the element to be fully inline, you can use a pseudo element to place the line on top of the element. This way the angle can be adjusted by changing the pseudo element's size:

.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>.

0人赞添加讨论(0) 举报

劳资没心，怎么记你

4楼-- · 2020-01-27 00:37

I don't think there is a sustainable css solution to this.

My pure CSS solution would be to place another element of text behind your first element of text that is identical in number of characters (characters being ' '), a text-decleration of line-through, and a transform of rotate.

Something like:

<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>

Text Rotation example

I am looking forward to seeing better answers from other users.

0人赞添加讨论(0) 举报

够拽才男人

5楼-- · 2020-01-27 00:37

This is an old question but as an alternative you can use CSS3 Linear Gradients for example (http://codepen.io/yusuf-azer/pen/ojJLoG).

For extensive explaining and a LESS Solution check

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%);
}

0人赞添加讨论(0) 举报

乱世女痞

6楼-- · 2020-01-27 00:39

There is a hacky way to do this, using the :before pseudo element. You give the :before a border, then rotate it with a CSS transform. Doing it this way adds no extra elements to the DOM, and adding/removing the strikethrough is a simple as adding/removing the class.

Here's a demo

Caveats

This will only work down to IE8. IE7 does not support :before, however will degrade gracefully in browsers that do support :before but don't support CSS transforms.
The angle of rotation is fixed. If the text is longer, the line will not touch the corners of the text. Be mindful of this.

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>

0人赞添加讨论(0) 举报

Deceive 欺骗

7楼-- · 2020-01-27 00:47

I think you could probably apply a rotation effect to a horizontal rule. Something like:

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

With the 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

Your mileage may vary depending on browser and version though, so I'm not sure if I'd resort to this. You might have to pull off some funky VML code to support older versions of IE, for example.

0人赞添加讨论(0) 举报