Pregunta Línea diagonal a través de
o


Quiero tener una línea diagonal dibujada desde la esquina superior derecha de <div> o <span> a la esquina inferior izquierda. El problema es que el contenido a veces será más largo o más corto. Entonces, algo así como una imagen estática no funcionará. Básicamente quiero lo que aquí se describe (¿Cómo crear una línea diagonal dentro de una celda de tabla?) pero por un <div> o una <span>.

Esto tiene algunas ideas interesantes: http://jsfiddle.net/zw3Ve/11/

Entonces esto hace: http://css-tricks.com/forums/discussion/13384/diagonal-line/p1

Este es un tipo de reintento en esta publicación: Cómo atacar oblicuamente con CSS

Parece que no puedo entender nada de esto. Parece que una solución pura de CSS debería funcionar aquí, pero simplemente no tengo las habilidades para que eso suceda. jQuery es una opción para mí también.


18
2017-07-11 19:56


origen


Respuestas:


¿El primer violín como ejemplo con imagen en segundo plano no es lo suficientemente bueno?

http://jsfiddle.net/zw3Ve/410/

.line {
    display:inline-block;
    border: 1px solid #ccc;
    margin: 10px;
    padding: 10px;
    background:url(http://i.piccy.info/i7/c7a432fe0beb98a3a66f5b423b430423/1-5-1789/1066503/lol.png);
    background-size:100% 100%;
}

10
2017-07-11 22:02



Puede hacer esto con un fondo SVG en línea, usando solo CSS y sin javascript.

.background {
   // Draw an SVG top left to bottom right 
   background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' version='1.1' preserveAspectRatio='none' viewBox='0 0 10 10'> <path d='M0 0 L0 10 L10 10' fill='red' /></svg>");
   background-repeat:no-repeat;
   background-position:center center;
   //scale it 
   background-size: 100% 100%, auto;
}

Ver mi violín:

http://jsfiddle.net/3GWw2/


22
2017-11-27 01:35



Puede usar una imagen SVG como esta:

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1 Tiny//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11-tiny.dtd">
<svg version="1.1" baseProfile="tiny" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
 x="0px" y="0px" width="200px" height="50px" viewBox="0 0 200 50">
    <line fill="none" stroke="#000" x1="0" y1="0" x2="200" y2="50"/>
</svg>

Establecerlo como fondo de tu span o div

.class-of-div-or-span { background: url("line.svg") no-repeat scroll 0 0 / 100% 100% transparent; }

Nota: tienes que dar tu lapso display:block o display:inline-block para que funcione.

También puede alinear el svg, usarlo en una etiqueta de objeto o incrustarlo en su CSS.


4
2017-07-11 21:01



En realidad, esto es más una cuestión de geometría que de codificación. Con cuadrados esto es fácil, pero con rectángulos tendrás que hacer los cálculos tú mismo. ¿Recuerdas a esos niños quejándose de que nunca tendrán que calcular la longitud de una diagonal en "la vida real"? :PAG Esto es lo que hice:

div.container /*makes a square container (300x300)*/
{
width: 300px;
height: 150px;
background-color: #aaa;
padding-top: 150px;
}
div.line
{
position: relative;
z-index: 1;
left: -61px; /*this is something I don't understand but apparently is required*/
width: 423px; /*since container is a square this equals to its diagonal: 300*1.41*/
height: 1px;
background-color: #000;
transform: rotate(45deg); /*again, this is easy since its a square. In rectangle you'll have to find a tangent*/
-ms-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
}

HTML:
<div class="container">
<div class="line"></div>
</div>

y un jsfiddle: http://jsfiddle.net/LWAKn/


2
2017-07-11 21:00



Puedes hacer esto con gradiente lineal. Por ejemplo, si quiero un cuadrado verde y blanco que corta en diagonal desde la esquina inferior izquierda a la parte superior derecha, le doy este atributo de fondo:

background: linear-gradient(to bottom right, white, white 50%, green 50%, green);

Esto significa que comienza como blanco en la esquina superior izquierda y continúa como blanco hasta la línea diagonal. La transición es inmediatamente de blanco a verde sin gradiente real ya que ambos están configurados al 50%. Si quieres una línea gris entre, puedes intentar esto:

background: linear-gradient(to bottom right, white, white 48%, gray 48%, gray 52%, green 52%, green);

2
2017-09-28 04:22