CSS로 비스듬히 치는 방법

97

다음과 같은 것이 필요합니다.

CSS로 어떻게 이것을 달성 할 수 있습니까? 한 가지 방법은 배경 이미지를 사용하는 것임을 알고 있지만 이미지없이 CSS로만 이것을 달성 할 수 있습니까?

html  css  image  strikethrough 
— 야로슬라프 클림 치크
소스

답변:

188

: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>
— Bojangles
소스
나는 IE8에서이 작품 .. 그것이 어떤 아날로그가 발생하지 않는 것을 생각하지 않는다 transform가 작동하지 않는 한 내가 알고 있음을filter
— 폭발 알약
3
당신 말이 맞아요, 미안 해요. IE8은 정상적인 취소 선으로 정상적으로 저하됩니다. 나는 분명히해야
— Bojangles
안녕하세요 @Bojangles, 저는 이것을 TD 요소에 적용하려고하는데 Firefox에서 약간 잘못된 것 같습니다. jsfiddle.net/Ms4Qy 이것이 왜 그런지 아십니까? 감사합니다
— Tom Hunter
1
물론입니다-완료 : stackoverflow.com/questions/18945031/…
— Tom Hunter
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);
}
— 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);
}

깡깡이

귀하의 마일리지는 브라우저 및 버전에 따라 다를 수 있으므로 여기에 의지 할 것인지 잘 모르겠습니다. 예를 들어 이전 버전의 IE를 지원하려면 펑키 한 VML 코드를 가져와야 할 수 있습니다.

— 마이크 크리스텐슨
소스
참고 1 : -7도, 아닙니다 +7; 참고 2 : HRChrome에서는 회색입니다. 무시할 수 있습니까?
— John Dvorak
그리고 CSS3 변환을 지원하지 않는 모든 브라우저는 어떻습니까?
— Mooseman
그래, 나는 당신이 설정 border-color하고 background-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당신의 위치를 opacity같은에서 48% 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 선형 그래디언트를 사용할 수 있습니다 ( http://codepen.io/yusuf-azer/pen/ojJLoG ).

광범위한 설명 및 LESS 솔루션 확인

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

CSS 클래스와 함께 HTM에서 SVG를 사용하여 이렇게했습니다.

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.