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
source

Réponses:

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
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
— 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
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
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
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
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
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.
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
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
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
source
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.