कैसे सीएसएस के साथ विशिष्ट रूप से हड़ताल करने के लिए

97

मुझे कुछ ऐसा ही चाहिए:

सीएसएस के साथ इसे कैसे प्राप्त कर सकते हैं? मुझे पता है कि एक तरीका पृष्ठभूमि छवि का उपयोग है, लेकिन क्या मैं बिना किसी छवि के केवल सीएसएस के साथ इसे प्राप्त कर सकता हूं?

— Jaroslav Klimčík
स्रोत

188

:beforeछद्म तत्व का उपयोग करते हुए, ऐसा करने का एक हैक तरीका है । आप :beforeएक बॉर्डर देते हैं, फिर इसे सीएसएस ट्रांसफॉर्म के साथ घुमाते हैं। इस तरह से करना DOM के लिए कोई अतिरिक्त तत्व नहीं जोड़ता है, और स्ट्राइकथ्रू को जोड़ना / हटाना क्लास को जोड़ने / हटाने के रूप में एक सरल है।

यहाँ एक डेमो है

चेतावनियां

यह केवल IE8 के लिए काम करेगा। IE7 का समर्थन नहीं करता:before , फिर भी ब्राउज़रों कि में शान से नीचा होगा करना समर्थन :beforeलेकिन सीएसएस रूपांतरण का समर्थन नहीं करते।
रोटेशन का कोण तय हो गया है। यदि पाठ लंबा है, तो पंक्ति पाठ के कोनों को नहीं छुएगी। इस बात का ध्यान रखें।

सीएसएस

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

एचटीएमएल

<span class="strikethrough">Deleted text</span>

— Bojangles
स्रोत

मुझे नहीं लगता कि यह IE8 में काम करता है .. इसका कोई एनालॉग नहीं है transformकि मुझे पता है कि जब तक यह काम नहीं कर सकता हैfilter

— धमाका गोलियां

3

आप सही हैं, क्षमा करें। IE8 एक सामान्य स्ट्राइकथ्रू लाइन में शान से नीचा दिखाएगा। मुझे यह स्पष्ट करना चाहिए था

— बोजैंगल्स

हाय @Bangangles, मैं इसे एक TD तत्व में लागू करने की कोशिश कर रहा हूं, लेकिन फ़ायरफ़ॉक्स में यह थोड़ा गलत लगता है .. jsfiddle.net/Ms4Qy किसी भी विचार यह क्यों हो सकता है? साभार

— टॉम हंटर

1

ज़रूर - किया: stackoverflow.com/questions/18945031/…

— टॉम हंटर

3

विचार करने के लिए एक और चेतावनी - यदि आपका पाठ दो पंक्तियों पर टूटता है तो स्ट्राइकथ्रू अपेक्षित नहीं होगा: 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>

सीएसएस के साथ:

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 के पुराने संस्करणों का समर्थन करने के लिए आपको कुछ फंकी वीएमएल कोड खींचना पड़ सकता है।

— माइक क्रिस्टेंसन
स्रोत

नोट 1: -7डिग्री, नहीं +7; नोट 2: HRक्रोम में ग्रे है; क्या ओवरराइड करना संभव है?

— जॉन ड्वोरक

और उन सभी ब्राउज़रों के बारे में जो CSS3 के परिवर्तनों का समर्थन नहीं करते हैं?

— Mooseman

हाँ, मेरा मानना है कि आप सेट करने की आवश्यकता होगी 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%।

— मिल्की पैटरन
स्रोत

यह मुझे ब्लॉक देता है, लाइनें नहीं।

— अशलीलगॉव

0

मुझे नहीं लगता कि इसका कोई स्थायी सीएसएस समाधान है।

मेरा शुद्ध सीएसएस समाधान पाठ के पहले तत्व के पीछे पाठ का एक और तत्व रखना होगा जो वर्णों की संख्या में समान है (वर्ण ''), लाइन-थ्रू का पाठ-घोषणा और घूमने का एक रूप।

कुछ इस तरह:

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

व्यापक व्याख्या और एक कम समाधान की जाँच के लिए

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

मैंने इसे सीटीएम क्लास में एचटीएम में एसवीजी का उपयोग करके इस तरह से किया:

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>

सीएसएस:

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

— जोस
स्रोत