Como cortar obliquamente com css

97

Eu preciso de algo assim:

Como posso conseguir isso com css? Eu sei que uma maneira é usar imagem de fundo, mas posso conseguir isso apenas com css sem nenhuma imagem?

html css image strikethrough Jaroslav Klimčík
fonte

188

Existe uma maneira hacky de fazer isso, usando o :beforepseudoelemento. Você fornece a :beforeborda e, em seguida, gira-o com uma transformação CSS. Fazer dessa maneira não adiciona elementos extras ao DOM e adicionar / remover o tachado é tão simples quanto adicionar / remover a classe.

Aqui está uma demonstração

Ressalvas

Isso só funcionará no IE8. IE7 não suporta:before , no entanto irá degradar graciosamente em navegadores que fazem o apoio :before, mas não suportam transformações de CSS.
O ângulo de rotação é fixo. Se o texto for mais longo, a linha não tocará nos cantos do texto. Esteja atento a isso.

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
fonte

Eu não acho que isso funcione no IE8 .. ele não tem nenhum análogo transformque eu conheço a menos que possa funcionar comfilter

Pílulas de explosão

3

Você está certo, desculpe. O IE8 se degradará normalmente em uma linha tachada normal. Eu deveria ter deixado isso claro

Bojangles,

Olá @Bojangles, estou tentando aplicar isso a um elemento TD, mas parece que está dando errado no Firefox .. jsfiddle.net/Ms4Qy Alguma idéia de por que isso pode ser? Obrigado

Tom Hunter

1

Claro - pronto: stackoverflow.com/questions/18945031/…

Tom Hunter

3

Outra advertência a considerar - o tachado não renderizará conforme o esperado se o seu texto quebrar em duas linhas: d.pr/i/1dKP5

Nick

59

Você pode usar o plano de fundo linear-gradientcom currentColorpara evitar a codificação da cor da fonte:

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

Expandir trecho

Se você não precisa que o elemento esteja totalmente embutido, você pode usar um pseudo elemento para colocar a linha no topo do elemento. Desta forma, o ângulo pode ser ajustado alterando o tamanho do pseudoelemento:

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

Expandir trecho

do utilizador
fonte

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
fonte

4

Eu acho que você provavelmente poderia aplicar um efeito de rotação a uma régua horizontal. Algo como:

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

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

Violino

Sua milhagem pode variar dependendo do navegador e da versão, então não tenho certeza se eu recorreria a isso. Você pode ter que retirar algum código VML funky para suportar versões mais antigas do IE, por exemplo.

Mike Christensen
fonte

Nota 1: -7graus, não +7; nota 2: HRé cinza no Chrome; isso é possível substituir?

John Dvorak

E quanto a todos os navegadores que não oferecem suporte a transformações CSS3?

Mooseman

Sim, acredito que você precisará definir border-colore background-color. Atualizado Fiddle

Mike Christensen

2

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

Meu exemplo não atenderá perfeitamente às suas necessidades, mas, para obter mais informações e ajustes engraçados, consulte http://gradients.glrzad.com/ .

O que você tem a fazer é criar um background-gradientdos white-black-whitee posicionar sua opacitypara algo como 48% 50% 52%.

Milche Patern
fonte

isso me dá blocos, não linhas.

ashleedawg

0

Não acho que haja uma solução de CSS sustentável para isso.

Minha solução CSS pura seria colocar outro elemento de texto atrás de seu primeiro elemento de texto que seja idêntico em número de caracteres (caracteres sendo ''), uma eliminação de texto de linha através e uma transformação de rotação.

Algo como:

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

Exemplo de rotação de texto

Estou ansioso para ver melhores respostas de outros usuários.

Levi
fonte

0

Esta é uma questão antiga, mas como alternativa você pode usar Gradientes Lineares CSS3, por exemplo ( http://codepen.io/yusuf-azer/pen/ojJLoG ).

Para uma explicação extensa e uma verificação de solução MENOS

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

Coçar, arranhão.
fonte

-1

Fiz assim usando um SVG no HTM com uma classe 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; }

Pode haver maneiras mais simples e fáceis agora. Acabei de preparar isso em uma pitada para minha página de oferta especial de detalhes do produto. Espero que ajude alguém.

IconMatrix
fonte

Deve haver algo faltando porque isso não funciona em um snippet no estado em que se encontra

ashleedawg

-1

Experimentar

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

Expandir trecho

Waruna Manjula
fonte

-3

E aqui está uma versão extravagante:

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
fonte

Como cortar obliquamente com css

Respostas:

Ressalvas

CSS

HTML