CSS ile eğik olarak nasıl grev yapılır

99

Bunun gibi bir şeye ihtiyacım var:

Bunu css ile nasıl başarabilirim? Bunun bir yolunun arka plan görüntüsü kullanmak olduğunu biliyorum, ancak bunu yalnızca herhangi bir görüntü olmadan css ile başarabilir miyim?

html  css  image  strikethrough 
— Jaroslav Klimčík
kaynak

Yanıtlar:

196

:beforeSözde öğeyi kullanarak bunu yapmanın hilekâr bir yolu var . :beforeBir kenarlık verirsiniz , ardından bir CSS dönüşümü ile döndürürsünüz. Bunu bu şekilde yapmak, DOM'a fazladan öğe eklemez ve üstünü çizme eklemek / kaldırmak, sınıfı eklemek / çıkarmak kadar basittir.

İşte bir demo

Uyarılar

  • Bu yalnızca IE8'e kadar çalışacaktır. IE7 desteklemez:before ancak tarayıcılarda incelikle düşecektir, do desteği :beforeancak CSS dönüşümleri desteklemez.
  • Dönme açısı sabittir. Metin daha uzunsa, satır metnin köşelerine değmeyecektir. Buna dikkat edin.

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
kaynak
Bunun IE8'de çalıştığını sanmıyorum .. transformile çalışamazsa bildiğim bir benzeri yokfilter
— Patlama Hapları
3
Haklısın üzgünüm IE8, zarif bir şekilde normal üstü çizili bir çizgiye indirgenecektir. Bunu netleştirmeliydim
— Bojangles
Merhaba @Bojangles, bunu bir TD öğesine uygulamaya çalışıyorum, ancak Firefox'ta biraz yanlış gidiyor gibi görünüyor .. jsfiddle.net/Ms4Qy Bunun neden olabileceği hakkında bir fikriniz var mı? Teşekkürler
— Tom Hunter
1
— Tom Hunter
3
Dikkate alınması gereken başka bir uyarı - metniniz iki satıra bölünürse
— Nick
60

Sen arka plan kullanabilirsiniz linear-gradientile currentColoryazı tipi rengini hardcoding kaçınmak için:

.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>.
Snippet'i genişlet

Öğenin tamamen satır içi olmasına ihtiyacınız yoksa, çizgiyi öğenin üstüne yerleştirmek için sözde bir öğe kullanabilirsiniz. Bu şekilde, sözde öğenin boyutu değiştirilerek açı ayarlanabilir:

.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>.
Snippet'i genişlet

— kullanıcı
kaynak
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
kaynak
4

Yatay bir kurala muhtemelen bir döndürme efekti uygulayabileceğinizi düşünüyorum. Gibi bir şey:

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

CSS ile:

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

Vaktini boşa harcamak

Kilometreniz tarayıcıya ve sürüme bağlı olarak değişebilir, bu yüzden buna başvurabilir miyim emin değilim. Örneğin, IE'nin eski sürümlerini desteklemek için bazı ilginç VML kodunu çıkarmanız gerekebilir.

— Mike Christensen
kaynak
Not 1: -7derece, değil +7; not 2: HRChrome'da gridir; bu geçersiz kılmak mümkün mü?
— John Dvorak
Peki ya CSS3 dönüşümlerini desteklemeyen tüm tarayıcılar?
— Mooseman
Evet, ben sette gerekir inanıyoruz border-colorve background-color. Güncellenmiş Fiddle
— Mike Christensen
2

CSS3 gradyanı

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

Örneğim ihtiyaçlarınızı tam olarak karşılamayacak, ancak daha fazla bilgi ve eğlenceli ince ayarlar için http://gradients.glrzad.com/ adresine bakın .

Ne yapmak zorunda oluşturmaktır background-gradientait white-black-whiteve keşfetmenize konumlandırmak opacitygibi bir şey 48% 50% 52%.

— Milche Patern
kaynak
bu bana çizgiler değil bloklar veriyor.
— ashleedawg
0

Bunun sürdürülebilir bir css çözümü olduğunu düşünmüyorum.

Benim saf CSS çözümüm, ilk metin öğenizin arkasına karakter sayısı (karakterler ''), satır geçişi metin bildirimi ve döndürme dönüşümü bakımından aynı olan başka bir metin öğesi yerleştirmek olacaktır.

Gibi bir şey:

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

Metin Döndürme örneği

Diğer kullanıcılardan daha iyi yanıtlar görmeyi dört gözle bekliyorum.

— Levi
kaynak
0

Bu eski bir sorudur, ancak alternatif olarak CSS3 Doğrusal Degradeleri kullanabilirsiniz ( http://codepen.io/yusuf-azer/pen/ojJLoG ).

Kapsamlı açıklama ve DAHA AZ Çözüm kontrolü için

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%);
}
— Kaşımak.
kaynak
0

Bojangles yanıtını yukarıdan geliştirmek:

.strike-diagonal-price {
position: relative;
background-color: black;
color: white;
}
.strike-diagonal-price:before {
position: absolute;
content: "";
left: 0;
top: 45%;
right: 0;
border-top: 2px solid;
border-color: red;
-webkit-transform: rotate(-25deg);
-moz-transform: rotate(-25deg);
-ms-transform: rotate(-25deg);
-o-transform: rotate(-25deg);
transform: rotate(-25deg);
}

Şimdi ihtiyacım olan etkiyi elde ediyorum: görüntü açıklamasını buraya girin

— Sam
kaynak
-1

HTM'de CSS sınıfıyla bir SVG kullanarak şu şekilde yaptım:

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

Şimdiye kadar daha kolay yollar olabilir. Ürün detayı özel teklif sayfam için bunu biraz önce hazırladım. Umarım birine yardımcı olur.

— IconMatrix
kaynak
Eksik bir şeyler olmalı çünkü bu , bir pasajda olduğu gibi çalışmıyor
— ashleedawg
-1

Deneyin

.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>
Snippet'i genişlet

— Waruna Manjula
kaynak
-3

Ve işte süslü bir versiyon:

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
kaynak
Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.