118

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

cssでこれをどのように達成できますか? 背景画像を使用する方法があることは知っていますが、画像なしでcssだけでこれを達成できますか?

4

11 に答える 11

218

: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>
于 2013-01-29T22:51:52.517 に答える
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);
}
于 2013-01-29T22:53:27.773 に答える
5

水平罫線に回転効果を適用できると思います。何かのようなもの：

<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 コードを作成する必要がある場合があります。

于 2013-01-29T22:49:52.100 に答える
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%。

于 2013-01-29T23:00:54.377 に答える
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>
</html>

テキストの回転の例

他のユーザーからのより良い回答を期待しています。

于 2013-01-29T22:55:41.053 に答える
0

これは古い質問ですが、代わりに CSS3 Linear Gradients を使用することもできます ( 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%);
}
于 2015-11-13T10:39:58.230 に答える