วิธีการตีแบบเฉียงด้วย css

99

ฉันต้องการสิ่งนี้:

จะบรรลุสิ่งนี้ด้วย css ได้อย่างไร? ฉันรู้ว่าวิธีหนึ่งคือใช้ภาพพื้นหลัง แต่ฉันสามารถทำได้โดยใช้ css โดยไม่มีภาพใด ๆ เท่านั้นหรือไม่

html  css  image  strikethrough 
— Jaroslav Klimčík
แหล่งที่มา

คำตอบ:

196

มีวิธีแฮ็กในการทำเช่นนี้โดยใช้:beforeองค์ประกอบหลอก คุณให้:beforeเส้นขอบแล้วหมุนด้วยการแปลง CSS การทำเช่นนี้จะไม่เพิ่มองค์ประกอบพิเศษให้กับ DOM และการเพิ่ม / ลบขีดฆ่านั้นทำได้ง่ายเพียงแค่เพิ่ม / ลบคลาส

นี่คือการสาธิต

ข้อควรระวัง

  • สิ่งนี้จะใช้ได้กับ IE8 เท่านั้น IE7 ไม่สนับสนุน:beforeแต่จะลดได้อย่างสง่างามในเบราว์เซอร์ที่ทำการสนับสนุน:beforeแต่ไม่สนับสนุนการแปลง CSS
  • มุมของการหมุนได้รับการแก้ไข หากข้อความยาวกว่าเส้นจะไม่แตะที่มุมของข้อความ พึงระลึกถึงสิ่งนี้

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>
— โบจังเกิล
แหล่งที่มา
ฉันไม่คิดว่ามันจะใช้งานได้ใน IE8 .. มันไม่มีอะนาล็อกใด ๆtransformที่ฉันรู้จักเว้นแต่มันจะสามารถใช้งานได้filter
— Explosion Pills
3
คุณพูดถูกขอโทษ IE8 จะลดระดับลงอย่างสง่างามเป็นเส้นขีดฆ่าปกติ ฉันควรจะทำให้ชัดเจน
— Bojangles
สวัสดี @Bojangles ฉันกำลังพยายามใช้สิ่งนี้กับองค์ประกอบ TD แต่ดูเหมือนว่าจะผิดพลาดเล็กน้อยใน Firefox .. jsfiddle.net/Ms4Qy มี ความคิดว่าทำไมถึงเป็นเช่นนั้น ขอบคุณ
— Tom Hunter
1
แน่นอน - เสร็จแล้ว: stackoverflow.com/questions/18945031/…
— Tom Hunter
3
ข้อแม้ที่ควรพิจารณาอีกประการหนึ่ง - ขีดฆ่าจะไม่แสดงผลตามที่คาดไว้หากข้อความของคุณแบ่งเป็นสองบรรทัด: d.pr/i/1dKP5
— Nick
60

คุณสามารถใช้พื้นหลังlinear-gradientที่มีcurrentColorการหลีกเลี่ยงการ hardcoding สีตัวอักษร:

.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);
}
— Kornel
แหล่งที่มา
4

ฉันคิดว่าคุณน่าจะใช้เอฟเฟกต์การหมุนกับกฎแนวนอนได้ สิ่งที่ต้องการ:

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

ซอ

ระยะทางของคุณอาจแตกต่างกันไปขึ้นอยู่กับเบราว์เซอร์และรุ่นดังนั้นฉันไม่แน่ใจว่าจะใช้วิธีนี้หรือไม่ คุณอาจต้องดึงโค้ด VML ขี้ขลาดออกมาเพื่อรองรับ IE เวอร์ชันเก่าเป็นต้น

— ไมค์คริสเตนเซน
แหล่งที่มา
หมายเหตุ 1: -7องศาไม่ใช่+7; หมายเหตุ 2: HRเป็นสีเทาใน Chrome เป็นไปได้ไหมที่จะลบล้าง?
— John Dvorak
แล้วเบราว์เซอร์ทั้งหมดที่ไม่รองรับการแปลง CSS3 ล่ะ?
— Mooseman
Yup ผมเชื่อว่าคุณจะต้องตั้งค่าและ border-color อัปเดต Fiddlebackground-color
— Mike Christensen
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และตำแหน่งของคุณในสิ่งที่ต้องการopacity48% 50% 52%

— Milche Patern
แหล่งที่มา
สิ่งนี้ทำให้ฉันมีบล็อกไม่ใช่เส้น
— ashleedawg
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>

ตัวอย่างการหมุนข้อความ

ฉันรอคอยที่จะได้รับคำตอบที่ดีกว่าจากผู้ใช้รายอื่น

— ลีวาย
แหล่งที่มา
0

นี่เป็นคำถามเก่า แต่คุณสามารถใช้ CSS3 Linear Gradients ได้เช่น ( http://codepen.io/yusuf-azer/pen/ojJLoG )

สำหรับการอธิบายอย่างละเอียดและการตรวจสอบ 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%);
}
— เกา.
แหล่งที่มา
0

การเพิ่มคำตอบ Bojangles จากด้านบน:

.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

ฉันทำวิธีนี้โดยใช้ SVG ใน HTM ด้วยคลาส 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; }

อาจมีวิธีที่ง่ายกว่านี้ในตอนนี้ ฉันเพิ่งปรุงมันขึ้นมาในหน้าข้อเสนอพิเศษสำหรับรายละเอียดผลิตภัณฑ์ของฉัน หวังว่ามันจะช่วยใครบางคน

— 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%;
— โจเซ่
แหล่งที่มา
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.