Comment frapper obliquement avec CSS

97

J'ai besoin de quelque chose comme ça:

Comment y parvenir avec le CSS? Je sais qu'une façon est d'utiliser l'image d'arrière-plan, mais puis-je y parvenir uniquement avec css sans aucune image?

html css image strikethrough Jaroslav Klimčík
la source

188

Il existe une manière piratée de le faire, en utilisant le :beforepseudo élément. Vous donnez :beforeune bordure, puis faites-la pivoter avec une transformation CSS. Faire cela de cette façon n'ajoute aucun élément supplémentaire au DOM, et ajouter / supprimer le barré est un simple comme ajouter / supprimer la classe.

Voici une démo

Mises en garde

Cela ne fonctionnera que jusqu'à IE8. IE7 ne prend pas en charge:before , mais se dégradera gracieusement dans les navigateurs qui prennent en charge :beforemais ne prennent pas en charge les transformations CSS.
L'angle de rotation est fixe. Si le texte est plus long, la ligne ne touchera pas les coins du texte. Soyez conscient de cela.

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

Je ne pense pas que cela fonctionne dans IE8 .. il n'a pas d'analogue à ce transformque je connaisse à moins que cela puisse fonctionner avecfilter

Explosion Pills

3

Vous avez raison, désolé. IE8 se dégradera gracieusement en une ligne barrée normale. J'aurais dû le préciser

Bojangles

Salut @Bojangles, j'essaye d'appliquer ceci à un élément TD, mais cela semble aller un peu mal dans Firefox .. jsfiddle.net/Ms4Qy Une idée pourquoi cela pourrait être? Merci

Tom Hunter

1

Bien sûr - terminé: stackoverflow.com/questions/18945031/…

Tom Hunter

3

Autre mise en garde à prendre en compte - le barré ne s'affichera pas comme prévu si votre texte se divise en deux lignes: d.pr/i/1dKP5

Nick

59

Vous pouvez utiliser l'arrière-plan linear-gradientavec currentColorpour éviter le codage en dur de la couleur de la police:

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

Développer l'extrait

Si vous n'avez pas besoin que l'élément soit entièrement en ligne, vous pouvez utiliser un pseudo élément pour placer la ligne au-dessus de l'élément. De cette façon, l'angle peut être ajusté en changeant la taille du pseudo élément:

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

Développer l'extrait

utilisateur
la source

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

4

Je pense que vous pourriez probablement appliquer un effet de rotation à une règle horizontale. Quelque chose comme:

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

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

Violon

Votre kilométrage peut toutefois varier en fonction du navigateur et de la version, je ne suis donc pas sûr que je recourrais à cela. Vous devrez peut-être retirer du code VML génial pour prendre en charge les anciennes versions d'IE, par exemple.

Mike Christensen
la source

Note 1: -7degrés, non +7; note 2: HRest gris en Chrome; est-ce possible de passer outre?

John Dvorak

Et qu'en est-il de tous les navigateurs qui ne prennent pas en charge les transformations CSS3?

Mooseman

Ouais, je crois que vous devrez régler border-coloret background-color. Mis à jour Fiddle

Mike Christensen le

2

Dégradé 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)) );

Mon exemple ne répondra pas parfaitement à vos besoins mais, pour plus d'informations et des ajustements amusants, consultez http://gradients.glrzad.com/ .

Ce que vous devez faire est de créer un background-gradientde white-black-whiteet placez votre opacityà quelque chose comme 48% 50% 52%.

Milche Patern
la source

cela me donne des blocs, pas des lignes.

ashleedawg

0

Je ne pense pas qu'il existe une solution css durable à cela.

Ma solution CSS pure serait de placer un autre élément de texte derrière votre premier élément de texte qui est identique en nombre de caractères (les caractères étant ''), une déclinaison de texte de ligne, et une transformation de rotation.

Quelque chose comme:

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

Exemple de rotation de texte

J'ai hâte de voir de meilleures réponses d'autres utilisateurs.

Levi
la source

0

C'est une vieille question, mais comme alternative, vous pouvez utiliser des dégradés linéaires CSS3 par exemple ( http://codepen.io/yusuf-azer/pen/ojJLoG ).

Pour des explications détaillées et une vérification de la solution MOINS

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

Rayure.
la source

-1

Je l'ai fait de cette façon en utilisant un SVG dans le HTM avec une 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; }

Il pourrait y avoir des moyens plus simples et plus faciles maintenant. Je viens de préparer ceci à la rigueur pour ma page d'offre spéciale de détail de produit. J'espère que ça aide quelqu'un.

IcôneMatrix
la source

Il doit y avoir quelque chose qui manque car cela ne fonctionne pas dans un extrait tel

quel

-1

Essayer

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

Développer l'extrait

Waruna Manjula
la source

-3

Et voici une version fantaisie:

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

Comment frapper obliquement avec CSS

Réponses:

Mises en garde

CSS

HTML