Cách tấn công xiên bằng css

97

Tôi cần một cái gì đó như thế này:

Làm thế nào để đạt được điều này với css? Tôi biết rằng một cách là sử dụng hình nền, nhưng tôi có thể đạt được điều này chỉ với css mà không có bất kỳ hình ảnh nào không?

— Jaroslav Klimčík
nguồn

188

Có một cách hacky để làm điều này, sử dụng :beforephần tử giả. Bạn tạo :befoređường viền, sau đó xoay nó bằng một biến đổi CSS. Làm theo cách này sẽ không thêm phần tử bổ sung nào vào DOM và việc thêm / xóa đường gạch ngang cũng đơn giản như thêm / xóa lớp.

Đây là bản demo

Cảnh báo

Điều này sẽ chỉ hoạt động đối với IE8. IE7 không hỗ trợ:before , tuy nhiên sẽ làm suy giảm một cách duyên dáng trong các trình duyệt làm hỗ trợ :beforenhưng không hỗ trợ biến đổi CSS.
Góc quay là cố định. Nếu văn bản dài hơn, dòng sẽ không chạm vào các góc của văn bản. Hãy lưu tâm đến điều này.

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>

— Hình tam giác
nguồn

Tôi không nghĩ rằng tác phẩm này trong IE8 .. nó không có bất kỳ tương tự để transformmà tôi biết trừ khi nó có thể làm việc vớifilter

— Thuốc nổ

3

Bạn nói đúng, xin lỗi. IE8 sẽ thoái biến thành một đường gạch ngang bình thường. Tôi lẽ ra phải nói rõ điều đó

— Bojaries

Xin chào @Bojangle, Tôi đang cố gắng áp dụng điều này cho một phần tử TD, nhưng nó có vẻ hơi sai trong Firefox .. jsfiddle.net/Ms4Qy Bất kỳ ý kiến nào tại sao điều này có thể xảy ra? Cảm ơn

— Tom Hunter

1

Chắc chắn - đã xong: stackoverflow.com/questions/18945031/…

— Tom Hunter

3

Một lưu ý khác cần xem xét - gạch ngang sẽ không hiển thị như mong đợi nếu văn bản của bạn bị ngắt thành hai dòng: d.pr/i/1dKP5

— Nick

59

Bạn có thể sử dụng nền linear-gradientvới currentColorđể tránh màu phông chữ mã cứng:

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

Mở rộng đoạn mã

Nếu bạn không cần phần tử phải nội dòng hoàn toàn, bạn có thể sử dụng phần tử giả để đặt dòng lên trên phần tử. Bằng cách này, góc có thể được điều chỉnh bằng cách thay đổi kích thước của phần tử giả:

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

Mở rộng đoạn mã

— người sử dụng
nguồn

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
nguồn

4

Tôi nghĩ bạn có thể áp dụng hiệu ứng xoay cho quy tắc ngang. Cái gì đó như:

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

Với 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);
}

Vĩ cầm

Tuy nhiên, số dặm của bạn có thể thay đổi tùy theo trình duyệt và phiên bản, vì vậy tôi không chắc liệu mình có dùng đến điều này hay không. Ví dụ, bạn có thể phải lấy ra một số mã VML thú vị để hỗ trợ các phiên bản IE cũ hơn.

— Mike Christensen
nguồn

Lưu ý 1: -7độ, không phải +7; lưu ý 2: HRcó màu xám trong Chrome; là có thể ghi đè?

— John Dvorak

Và tất cả các trình duyệt không hỗ trợ chuyển đổi CSS3 thì sao?

— Mooseman,

Đúng, tôi tin rằng bạn sẽ cần thiết lập border-colorvà background-color. Cập nhật Fiddle

— Mike Christensen

2

CSS3 gradient

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

Ví dụ của tôi sẽ không đáp ứng nhu cầu của bạn một cách hoàn hảo nhưng để biết thêm thông tin và các chỉnh sửa vui nhộn, hãy xem http://gradients.glrzad.com/ .

Những gì bạn phải làm là tạo ra một background-gradientsố white-black-whitevà vị trí của bạn opacitytại một cái gì đó giống như 48% 50% 52%.

— Milche Patern
nguồn

điều này mang lại cho tôi khối, không phải dòng.

— ashleedawg

0

Tôi không nghĩ rằng có một giải pháp css bền vững cho điều này.

Giải pháp CSS thuần túy của tôi sẽ là đặt một phần tử văn bản khác phía sau phần tử văn bản đầu tiên của bạn giống hệt nhau về số ký tự (ký tự là ''), ngắt dòng văn bản và chuyển đổi xoay vòng.

Cái gì đó như:

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

Ví dụ về xoay văn bản

Tôi rất mong nhận được câu trả lời tốt hơn từ những người dùng khác.

— Levi
nguồn

0

Đây là một câu hỏi cũ nhưng để thay thế, bạn có thể sử dụng CSS3 Linear Gradients chẳng hạn ( http://codepen.io/yusuf-azer/pen/ojJLoG ).

Để giải thích sâu rộng và kiểm tra Giải pháp ÍT

http://www.yusufazer.com/tutorials-how-to/how-to-make-a-diagon-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%);
}

— Vết trầy.
nguồn

-1

Tôi đã làm theo cách này bằng cách sử dụng SVG trong HTM với lớp 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; }

Có thể có nhiều cách đơn giản dễ dàng hơn bây giờ. Tôi vừa chuẩn bị xong điều này cho trang ưu đãi đặc biệt chi tiết sản phẩm của mình. Hy vọng nó sẽ giúp một ai đó.

— IconMatrix
nguồn

Phải có cái gì đó thiếu vì đây không làm việc trong một đoạn như nó vốn có

— ashleedawg

-1

Thử

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

Mở rộng đoạn mã

— Waruna Manjula
nguồn

-3

Và đây là một phiên bản lạ mắt:

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
nguồn