Cara menyerang secara miring dengan css

97

Saya butuh sesuatu seperti ini:

Bagaimana mencapai ini dengan css? Saya tahu bahwa salah satu caranya adalah menggunakan gambar latar belakang, tetapi dapatkah saya mencapai ini hanya dengan css tanpa gambar apa pun?

html css image strikethrough Jaroslav Klimčík
sumber

Jawaban:

189

Ada cara hacky untuk melakukan ini, menggunakan :beforeelemen pseudo. Anda memberi :beforebatas, lalu memutarnya dengan transformasi CSS. Melakukannya dengan cara ini tidak menambahkan elemen tambahan ke DOM, dan menambahkan / menghapus coretan semudah menambahkan / menghapus kelas.

Berikut demo nya

Peringatan

  • Ini hanya akan berfungsi hingga IE8. IE7 tidak mendukung:before , namun akan menurunkan anggun di browser yang melakukan dukungan :beforetetapi tidak mendukung transformasi CSS.
  • Sudut rotasi ditetapkan. Jika teksnya lebih panjang, garis tersebut tidak akan menyentuh sudut teks. Perhatikan ini.

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>
Bojangles
sumber
Saya tidak berpikir bahwa ini berfungsi di IE8 .. ia tidak memiliki analog dengan transformyang saya tahu kecuali dapat bekerja denganfilter
Explosion Pills
3
Anda benar, maaf. IE8 akan menurunkan dengan anggun menjadi garis coretan normal. Saya harus menjelaskannya
Bojangles
Hai @Bojangles, Saya mencoba menerapkan ini ke elemen TD, tetapi tampaknya ada yang salah di Firefox .. jsfiddle.net/Ms4Qy Ada ide mengapa ini terjadi? Terima kasih
Tom Hunter
1
Tentu - selesai: stackoverflow.com/questions/18945031/…
Tom Hunter
3
Peringatan lain untuk dipertimbangkan - coretan tidak akan ditampilkan seperti yang diharapkan jika teks Anda pecah menjadi dua baris: d.pr/i/1dKP5
Nick
59

Anda dapat menggunakan latar belakang linear-gradientdengan currentColoruntuk menghindari warna font hardcode:

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

Jika Anda tidak membutuhkan elemen untuk sepenuhnya sebaris, Anda dapat menggunakan elemen semu untuk menempatkan garis di atas elemen. Dengan cara ini sudut dapat disesuaikan dengan mengubah ukuran elemen semu:

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

pengguna
sumber
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);
}
Kornel
sumber
4

Saya pikir Anda mungkin bisa menerapkan efek rotasi ke aturan horizontal. Sesuatu seperti:

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

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

Biola

Jarak tempuh Anda mungkin berbeda tergantung pada browser dan versinya, jadi saya tidak yakin apakah saya akan menggunakan ini. Anda mungkin harus menggunakan beberapa kode VML yang funky untuk mendukung versi IE yang lebih lama, misalnya.

Mike Christensen
sumber
Catatan 1: -7derajat, bukan +7; catatan 2: HRberwarna abu-abu di Chrome; apakah itu mungkin untuk ditimpa?
John Dvorak
Dan bagaimana dengan semua browser yang tidak mendukung transformasi CSS3?
Mooseman
Ya, saya yakin Anda harus mengatur border-colordan background-color. Diperbarui Fiddle
Mike Christensen
2

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

Contoh saya tidak akan memenuhi kebutuhan Anda dengan sempurna tetapi, untuk info lebih lanjut dan tweak lucu, lihat http://gradients.glrzad.com/ .

Apa yang harus Anda lakukan adalah membuat background-gradientdari white-black-whitedan posisi Anda opacitypada sesuatu seperti 48% 50% 52%.

Milche Patern
sumber
ini memberi saya blok, bukan garis.
ashleedawg
0

Saya rasa tidak ada solusi css yang berkelanjutan untuk ini.

Solusi CSS murni saya adalah menempatkan elemen teks lain di belakang elemen teks pertama Anda yang identik dalam jumlah karakter (karakter menjadi ''), deklerasi teks baris-tayang, dan transformasi rotate.

Sesuatu seperti:

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

Contoh Rotasi Teks

Saya berharap untuk melihat jawaban yang lebih baik dari pengguna lain.

Levi
sumber
0

Ini adalah pertanyaan lama tetapi sebagai alternatif Anda dapat menggunakan CSS3 Linear Gradients misalnya ( http://codepen.io/yusuf-azer/pen/ojJLoG ).

Untuk penjelasan ekstensif dan pemeriksaan LESS Solution

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%);
}
Menggaruk.
sumber
-1

Saya melakukannya dengan cara ini menggunakan SVG di HTM dengan kelas CSS:

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

Mungkin ada cara yang lebih sederhana dan lebih mudah sekarang. Saya baru saja memasaknya untuk halaman penawaran khusus detail produk saya. Semoga bisa membantu seseorang.

IconMatrix
sumber
Pasti ada sesuatu yang hilang karena ini tidak berfungsi dalam cuplikan sebagaimana adanya
ashleedawg
-1

Mencoba

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

Waruna Manjula
sumber
-3

Dan inilah versi mewahnya:

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