web-dev-qa-db-fra.com

Comment frapper obliquement avec css

J'ai besoin de quelque chose comme ça: 

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

htmlcssimagestrikethrough
88
Jaroslav Klimčík

Il y a une façon hacky de faire cela, en utilisant le :before pseudo-élément. Vous donnez le :before _ une bordure, puis faites-la pivoter avec une transformation CSS. En procédant ainsi, aucun élément supplémentaire n'est ajouté au DOM, et ajouter/supprimer le barré est simple, il suffit d'ajouter/de supprimer la classe.

Voici une démo

Mises en garde

  • Cela ne fonctionnera que jusqu'à IE8. IE7 ne supporte pas :before , cependant, se dégradera avec élégance dans les navigateurs qui supportent le support de :before mais ne supporte pas 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>
170
Bojangles

Vous pouvez utiliser background linear-gradient avec currentColor pour éviter le codage en 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>.

Si vous n'avez pas besoin que l'élément soit entièrement intégré, 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 modifiant 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>.
39
user
del {
    position:relative;
    text-decoration:none;
}
del::after {
    content:"";
    position:absolute;
    top:50%; left:0; width:100%; height:1px; 
    background:black;
    transform:rotate(-7deg);
}
5
Kornel

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 varier en fonction du navigateur et de la version. Je ne sais donc pas si j'aurais recours à cela. Vous devrez peut-être extraire du code VML génial pour prendre en charge les anciennes versions de IE, par exemple.

4
Mike Christensen

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 de tweeks amusants: http://gradients.glrzad.com/

Ce que vous devez faire est de créer un dégradé de fond de blanc-noir-blanc et de positionner votre opacité sur une ligne droite 48% 50% 52%

Continuer

3
Milche Patern

Je l'ai fait de cette façon en utilisant un SVG dans 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 plus faciles maintenant. Je viens de préparer cela en une pincée pour la page de mon offre spéciale sur les détails de produits. J'espère que ça aide quelqu'un.

0
IconMatrix

Je ne pense pas qu'il y ait une solution durable de CSS à ceci.

Ma solution CSS pure consisterait à placer derrière votre premier élément de texte un nombre identique de caractères (caractères en ''), un autre élément de texte, une décélération de texte linéaire 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

Je suis impatient de voir de meilleures réponses des autres utilisateurs.

0
Levi

C'est une vieille question, mais vous pouvez également utiliser une variante de dégradés linéaires CSS3 ( http://codepen.io/yusuf-azer/pen/ojJLoG ).

Pour une explication détaillée et une vérification de 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%);
}
0
Scratch.