Google Chrome: Diagonal CSS Line-Through

Google Chrome: Diagonal CSS line-through

Nope, this is definitely not CSS.

However, that doesn't mean you can't do something similar with CSS.
Start with an element with a specific class, like "slashed":

<span class="slashed">True?</span>

Then, CSS pseudo elements/selectors to the rescue!

.slashed:before {
    content:"╱";   
    display:block;
    color:red;
    font-size:2em;
    position:relative;
    left:1em;
    top:5px;
  }

Note that the slash used in the CSS is "╱", not "/", as it gives a better slash effect.
You can obviously tweak it by changing the top, left, and font-size properties.
The end result looks like:

Note that CSS :before won't work in IE7 below, and other (much) older browsers, so you'll want to have some sort of fallback.

http://jsbin.com/ohuxig/edit#html,live

Strange diagonal lines in Chrome/Chromium (bug?)

It's almost certainly this Chrome/Chromium rasterization bug, which appears to be specific to certain NVidia GPUs:

Issue 691262 Corrupted background with GPU rasterization.

Slanted diagonal line in html or css?

Based on CSS3 linear-gradients solution except that the angle is not hard coded:

table:nth-of-type(1) td {  background-image: linear-gradient(    to top right,    white 48%,    black,    white 52%  );}table:nth-of-type(2) td {  background-image: linear-gradient(    to top right,    papayawhip calc(50% - 1px),    black,    papayawhip calc(50% + 1px)  );}/* for testing */table {  border-collapse: collapse;  margin-top: 1em;  margin-bottom: 1em;}td:nth-child(odd) {  width: 10em;}td:nth-child(even) {  width: 20em;}

<table border="1">  <tbody>    <tr>      <td>Narrow</td>      <td>Wide</td>    </tr>    <tr>      <td>Narrow</td>      <td>Wide</td>    </tr>  </tbody></table><table border="1">  <tbody>    <tr>      <td>Narrow</td>      <td>Wide</td>    </tr>    <tr>      <td>Narrow</td>      <td>Wide</td>    </tr>  </tbody></table>

Is it possible to draw a diagonal line using CSS3?

yes it is, there is more then one possibility:

You could use a hr element or a other element and rotate it. Here is a demo:

And yes it works in IE to :)

http://jsfiddle.net/LqFAX/

   -moz-transform: rotate(7.5deg);  
     -o-transform: rotate(7.5deg);  
-webkit-transform: rotate(7.5deg);  
    -ms-transform: rotate(7.5deg);  
        transform: rotate(7.5deg);  
           filter:  progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand',  
                  M11=0.9914448613738104, M12=-0.13052619222005157,M21=0.13052619222005157, M22=0.9914448613738104);
     -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.9914448613738104, M12=-0.13052619222005157, M21=0.13052619222005157, M22=0.9914448613738104,sizingMethod='auto expand')";

             zoom: 1;

Diagonal line through div or span

Is first fiddle as example with image in background instead not good enough?

http://jsfiddle.net/zw3Ve/410/

.line {
    display:inline-block;
    border: 1px solid #ccc;
    margin: 10px;
    padding: 10px;
    background:url(http://i.piccy.info/i7/c7a432fe0beb98a3a66f5b423b430423/1-5-1789/1066503/lol.png);
    background-size:100% 100%;
}

How to strike through obliquely with css

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>

---

Related Topics