সিএসএসের সাথে কীভাবে তিরস্কার করা যায়

99

আমার এর মতো কিছু দরকার:

সিএসএস দিয়ে এটি কীভাবে অর্জন করা যায়? আমি জানি যে একটি উপায় হ'ল ব্যাকগ্রাউন্ড ইমেজ ব্যবহার করা, তবে আমি কি কোনও চিত্র ছাড়াই কেবল CSS এর মাধ্যমে এটি অর্জন করতে পারি?

html  css  image  strikethrough 
— জারোস্লাভ ক্লেমিক
সূত্র

উত্তর:

195

এটি করার একটি হ্যাকি উপায় আছে, :beforeসিউডো উপাদানটি ব্যবহার করে । আপনি :beforeএকটি সীমানা দিন, তারপরে এটি একটি সিএসএস রূপান্তর দিয়ে ঘোরান। এইভাবে করাটি ডিওমে কোনও অতিরিক্ত উপাদান যুক্ত করে না এবং স্ট্রাইকথ্রু যুক্ত / অপসারণ ক্লাস যুক্ত করা / অপসারণ করার মতো একটি সহজ কাজ।

এখানে একটি ডেমো আছে

গুহা

  • এটি কেবল আইই 8 তে কাজ করবে। 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>
— বোজাংলেস
সূত্র
আমি মনে করি না যে এটি আইই 8 তে কাজ করে .. এটির সাথে কাজ করতে না পারলে এর সাথে transformআমার জানা কোনও কোনও এনালগ নেইfilter
— এক্সপ্লোশন পিলস
4
আপনি ঠিক বলেছেন, দুঃখিত। আইই 8 কর্কশভাবে একটি সাধারণ স্ট্রাইকথ্রু লাইনে হ্রাস করবে। আমার এটি পরিষ্কার করা উচিত ছিল
— বোজ্যাংলেস
হাই @ বজ্যাঙ্গেলস, আমি এটি একটি টিডি উপাদান প্রয়োগ করার চেষ্টা করছি, তবে এটি ফায়ারফক্সে কিছুটা ভুল হয়ে গেছে বলে মনে হচ্ছে .. jsfiddle.net/Ms4Qy কেন এই ধারণা হতে পারে কোন ধারণা? ধন্যবাদ
— টম হান্টার
4
নিশ্চিত - সম্পন্ন: স্ট্যাকওভারফ্লো.com
— টম হান্টার
4
বিবেচনা করার জন্য আরেকটি সতর্কতা
— নিক
60

হার্ডকোডিং ফন্টের রঙ এড়াতে আপনি এর 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 রূপান্তরগুলি সমর্থন করে না এমন সমস্ত ব্রাউজারগুলির কী?
— মুজম্যান
হ্যাঁ, আমি বিশ্বাস করি আপনাকে সেট করতে হবে 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/ দেখুন ।

আপনাকে যা করতে হবে তা হ'ল একটি create background-gradient এর white-black-whiteএবং আপনার অবস্থান opacityভালো কিছু এ 48% 50% 52%।

— মিল্ক প্যাটার্ন
সূত্র
এটি আমাকে ব্লক দেয়, লাইন দেয় না।
— ashleedawg
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%);
}
— স্ক্র্যাচ।
সূত্র
0

উপর থেকে বোজাঙ্গলসের উত্তর বাড়ানো:

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

এখন আমার প্রয়োজনীয় প্রভাবটি পেয়েছি: এখানে চিত্র বর্ণনা লিখুন

— স্যাম
সূত্র
-1

আমি এটি এইচটিএম-তে একটি এসএসজি ব্যবহার করে একটি সিএসএস ক্লাস সহ এটি করেছি:

এইচটিএমএল:

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

এতক্ষণে আরও সহজ উপায় হতে পারে। আমি এইমাত্র আমার পণ্য বিবরণ বিশেষ অফার পৃষ্ঠার জন্য একটি চিম্টি এ রান্না করেছি। আশা করি এটি কাউকে সাহায্য করবে।

— আইকনম্যাট্রিক্স
সূত্র
কিছু অনুপস্থিত থাকতে হবে কারণ এটি যেমন স্নিপেটে যেমন কাজ করে না
— 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%;
— জোস
সূত্র
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.