CSSで斜めに打ち消す方法

97

私はこのようなものが必要です：

CSSでこれをどのように達成できますか？背景画像を使用するのが1つの方法であることはわかっていますが、画像なしのCSSでのみこれを実現できますか？

188

これを行うには、:before疑似要素を使用するハックな方法があります。あなた:beforeはボーダーを与え、それからCSS変換でそれを回転させます。この方法で行うと、DOMに余分な要素が追加されず、取り消し線の追加/削除は、クラスの追加/削除と同じくらい簡単です。

ここにデモがあります

注意事項

これはIE8までしか機能しません。IE7 はをサポートしていませんが:before、CSSトランスフォームをサポートしているがサポートし:beforeていないブラウザーでは正常に低下します。
回転角度は固定です。テキストが長い場合、線はテキストの角に接触しません。これに注意してください。

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

— Explosion Pills 2013年

3

ごめんなさい。IE8は通常の取り消し線に正常に低下します。私はそれを明確にすべきだった

— ボジャングルズ2013年

こんにちは@Bojanglesは、私は、TD要素にこれを適用しようとしているが、Firefoxの..でビット間違って行くように見えるjsfiddle.net/Ms4Qy これはあるかもしれない理由を任意のアイデアを？ありがとう

— トムハンター

1

確かに-行わ：stackoverflow.com/questions/18945031/...

— トム・ハンター

3

考慮すべきもう1つの警告—テキストが2行に分かれている場合、取り消し線は期待どおりにレンダリングされません：d.pr/i/1dKP5

— Nick

59

で背景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>.

スニペットを展開

— ユーザー
ソース

7

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

フィドル

ただし、ブラウザとバージョンによっては距離が異なる可能性があるため、これを使用するかどうかはわかりません。たとえば、古いバージョンのIEをサポートするには、ファンキーなVMLコードを削除する必要がある場合があります。

— マイク・クリステンセン
ソース

注1：-7度ではなく+7、注2：HRChromeでは灰色です。オーバーライドすることは可能ですか？

— John Dvorak

そして、CSS3変換をサポートしていないすべてのブラウザはどうですか？

— Mooseman、2013年

うん、私はあなたが設定する必要があります信じてborder-colorとbackground-color。フィドルを更新

— マイククリステンセン

2

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/を参照してください。

あなたがしなければならないことは、background-gradientのようなものを作成してwhite-black-white配置するopacityことです48% 50% 52%。

— ミルチェ・パターン
ソース

これにより、線ではなくブロックが得られます。

— ashleedawg

0

これに対する持続可能な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>

テキストの回転の例

他のユーザーからのより良い回答を楽しみにしています。

— レヴィ
ソース

0

これは古い質問ですが、代わりに、たとえば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%);
}

— スクラッチ。
ソース

-1

CSSクラスを使用してHTMのSVGを使用して、次のようにしました。

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

今までより簡単な方法があるかもしれません。私はこれをピンチで私の製品詳細の特別オファーページのために調理しました。それが誰かを助けることを願っています。

— IconMatrix
ソース

これはスニペットではそのままでは機能しないため、何か不足している必要があります

— ashleedawg

-1

試す

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

スニペットを展開

— ワルナマンジュラ
ソース

-3

そして、これは豪華なバージョンです：

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

— ホセ
ソース