html - div - Cómo atacar oblicuamente con CSS
title html (9)
Necesito algo como esto:
¿Cómo se puede lograr esto con CSS? Sé que una forma es utilizar una imagen de fondo, pero ¿puedo lograr esto solo con CSS sin ninguna imagen?
Creo que probablemente puedas aplicar un efecto de rotación a una regla horizontal. Algo 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);
}
Sin embargo, su kilometraje puede variar según el navegador y la versión, por lo que no estoy seguro de si recurriría a esto. Es posible que deba extraer algún código VML funky para admitir versiones anteriores de IE, por ejemplo.
Esta es una pregunta antigua, pero como alternativa puede usar degradados lineales CSS3 por ejemplo ( http://codepen.io/yusuf-azer/pen/ojJLoG ).
Para una extensa explicación y una solución LESS check
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%);
}
Gradiente de 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)) );
Mi ejemplo no cubrirá sus necesidades, pero para obtener más información y divertidos tweeks: http://gradients.glrzad.com/
Lo que tienes que hacer es crear un degradado de fondo de blanco-negro-blanco y posicionar tu opacidad en la línea smthing 48% 50% 52%
Continua
Lo hice de esta manera usando un SVG en el HTM con una clase de 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; }
Podría haber formas más sencillas y sencillas a esta altura. Acabo de preparar esto en un apuro para mi página de oferta especial de detalles del producto. Espero que ayude a alguien.
No creo que haya una solución de CSS sostenible para esto.
Mi solución pura de CSS sería colocar otro elemento de texto detrás de tu primer elemento de texto que sea idéntico en número de caracteres (los caracteres son ''''), una declinación de texto de línea directa y una transformación de rotación.
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>
Espero ver mejores respuestas de otros usuarios.
Puede usar linear-gradient fondo con currentColor para evitar el color de la fuente de codificación rígida:
.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 no necesita que el elemento esté completamente en línea, puede usar un pseudo elemento para colocar la línea en la parte superior del elemento. De esta forma, el ángulo se puede ajustar cambiando el tamaño del pseudo elemento:
.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>.
Y aquí hay una versión elegante:
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%;
Hay una manera chiflada de hacer esto, usando el pseudo elemento :before . Da el :before un borde, luego rótelo con una transformación CSS. Hacerlo de esta manera no agrega elementos adicionales al DOM, y agregar / eliminar el tachado es tan simple como agregar / eliminar la clase.
Advertencias
- Esto solo funcionará en IE8. IE7 no es compatible
:before, sin embargo, se degradará con elegancia en los navegadores compatibles:beforepero no son compatibles con las transformaciones CSS. - El ángulo de rotación es fijo. Si el texto es más largo, la línea no tocará las esquinas del texto. Se consciente 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>
del {
position:relative;
text-decoration:none;
}
del::after {
content:"";
position:absolute;
top:50%; left:0; width:100%; height:1px;
background:black;
transform:rotate(-7deg);
}