18 votos

Cómo lograr a través de oblicuamente con css

Necesito algo como esto:

¿Cómo se puede lograr esto con css? Sé que es una manera de utilizar la imagen de fondo, pero puedo lograrlo sólo con css sin ningún tipo de imagen?

40voto

Bojangles Puntos 31474

Hay un hacky manera de hacer esto, el uso de la :before pseudo elemento. Dar la :before una frontera, a continuación, gírelo con un CSS transformar. Haciendo de esta manera no agrega elementos adicionales a la DOM, y añadiendo/quitando el tachado es tan sencillo como agregar/eliminar de la clase.

Aquí un demo

Advertencias

  • Esto sólo va a trabajar a IE8. IE7 no admite :before, sin embargo se degrada con gracia en los navegadores que hacen de soporte :before pero no soporte CSS, se transforma.
  • El ángulo de rotación es fijo. Si el texto es más largo, la línea de no tocar las esquinas del texto. Ser conscientes de esto.

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>

4voto

Mike Christensen Puntos 29735

Creo que probablemente se podría aplicar un efecto de rotación a una regla horizontal. Algo así como:

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

Con el 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);
} 

El violín

Su kilometraje puede variar dependiendo del navegador y su versión, así que no estoy seguro de si me gustaría recurrir a esto. Usted podría tener que sacar a algunos de funky VML código para apoyar las versiones antiguas de IE, por ejemplo.

2voto

CSS3 gradiente

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

Mi ejemplo no llenar perfecto a sus necesidades pero, para más información y divertido tweeks : http://gradients.glrzad.com/

Lo que tienes que hacer es crear un fondo degradado de blanco-negro-blanco y la posición de su opacidad en smthing línea 48% 50% 52%

Llevar en

0voto

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

0voto

Levi Puntos 126

Creo que no es sostenible css solución a esto.

Mi puro CSS solución sería colocar otro elemento de texto detrás de su primer elemento de texto que es idéntico en número de caracteres (caracteres ' ser '), un texto-decleration de línea-a través de, y una transformación de rotación.

Algo así 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>

Texto de la Rotación de ejemplo

Estoy deseando ver mejor las respuestas de otros usuarios.

Iteramos.com

Iteramos es una comunidad de desarrolladores que busca expandir el conocimiento de la programación mas allá del inglés.
Tenemos una gran cantidad de contenido, y también puedes hacer tus propias preguntas o resolver las de los demás.

Powered by: