Programing

CSS로 비스듬히 치는 방법

crosscheck 2020. 9. 9. 07:33
반응형

CSS로 비스듬히 치는 방법

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

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

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

글꼴 색상을 하드 코딩하지 않도록 배경 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>.

del {
    position:relative;
    text-decoration:none;
}
del::after {
    content:"";
    position:absolute;
    top:50%; left:0; width:100%; height:1px; 
    background:black;
    transform:rotate(-7deg);
}

가로 룰에 회전 효과를 적용 할 수있을 것 같습니다. 다음과 같은 것 :

<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 코드를 가져와야 할 수 있습니다.

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

내 예제는 당신의 필요를 완벽하게 채우지는 못하지만, 더 많은 정보와 재미있는 tweeks를 위해 : http://gradients.glrzad.com/

What you have to do is create a background-gradient of white-black-white and position your opacity at smthing line 48% 50% 52%

Carry on

I don't think there is a sustainable css solution to this.

My pure CSS solution would be to place another element of text behind your first element of text that is identical in number of characters (characters being ' '), a text-decleration of line-through, and a transform of rotate.

Something like:

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

Text Rotation example

I am looking forward to seeing better answers from other users.

This is an old question but as an alternative you can use CSS3 Linear Gradients for example (http://codepen.io/yusuf-azer/pen/ojJLoG).

For extensive explaining and a LESS Solution check

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

I did it this way using an SVG in the HTM with a CSS class:

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

There might be simpler easier ways by now. I just cooked this up in a pinch for my product detail special offer page. Hope it helps someone.

And here's a fancy version:

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

참고URL : https://stackoverflow.com/questions/14593415/how-to-strike-through-obliquely-with-css

반응형

'Programing' 카테고리의 다른 글

게터, 세터 및 속성 모범 사례.  (0) 2020.09.10
C ++에서 구조체를 비교하는 동안 == 연산자가 없습니다.  (0) 2020.09.09
Twitter Bootstrap의 태그가 제대로 작동하지 않습니까?  (0) 2020.09.09
C 쉼표 연산자 사용  (0) 2020.09.09
파이썬에 단어를 목록으로 분할하는 기능이 있습니까?  (0) 2020.09.09

'Programing'의 다른글

  • 현재글CSS로 비스듬히 치는 방법

관련글

댓글

티스토리툴바