Div con borde inclinado usando CSS3?

Estoy creando un widget de javascript que cambia el tamaño de los divs vecinos, para revelar más de la imagen de fondo del div cuando el usuario se sitúa sobre él. Esto es bastante simple, y funciona bien con los divs que tienen bordes rectos (obviamente). Sin embargo, el borde límite 'necesita' inclinarse.Div con borde inclinado usando CSS3?

¿Hay alguna manera simple de usar css3 para hacer un borde inclinado entre 2 elementos DOM?

He encontrado las transformaciones de css3 (es decir, sesgo) y el truco de borde diagonal (usando medio color, media transparencia), pero ninguno de estos parece ser capaz de lograr lo que necesito.

El efecto que estoy tratando de lograr es como en esta imagen:

diaglonal border between dom elements

Fuente

2012-04-18 David Downes

+1 simplemente por elección ejemplo de una imagen de. –

Puede incrustar técnicamente su imagen de forma rotativa (consulte transform: rotate(<X>deg) de CSS3) <div/>, y luego girar la imagen embebida con un ángulo inverso.

Como alternativa, puede usar SVG (con <clipPath>) para lograr este efecto. Además SVG incrustado en <object/> etiquetas pueden utilizar JavaScript, por lo que la parte receptiva puede ser parte del viaje.

Ambos JSFiddle están en camino.

EDIT1: CSS Versión: http://jsfiddle.net/kU3tu/
Edit2: SVG Versión: http://jsfiddle.net/b2JJK/

Fuente

2012-04-18 09:09:35 Iso

Gracias a todos por sus respuestas! Desafortunadamente las prioridades cambian, y no he tenido la oportunidad de implementar realmente ninguna de estas soluciones, pero al revisar los violines, ¡estoy seguro de que funcionarán cuando finalmente lo haga! –

La solución que se me ocurre es el uso de dos imágenes con posición absoluta y un contenedor div con desbordamiento configurado como oculto.

El rojo y el verde son imágenes (el rojo podría ser más corto desde la parte superior y el verde podría ser más corto desde la parte inferior ya que estas partes no son visibles de todos modos). Azul es el contenedor con desbordamiento: oculto.

Image

Pero esta solución requiere la rotación de las imágenes, que pueden no ser adecuados para que utilice.

La segunda solución sería usar una imagen y un separador div siendo solo un borde girado. Pero en este caso, podría preparar la imagen adecuada antes de todos modos sin la necesidad de hacks.

Fuente

2012-04-18 09:04:11

La segunda opción no es factible ya que la imagen del borde debería cambiar a medida que el borde se deslizaba de lado a lado. La primera opción que también podría tener un ir en, supongo que podría tratar de girar en sentido contrario la propia imagen para deshacer la rotación de la div ... –

He tratado de mi parte puede eso es ayudarle.

HTML

<div class="container"> 
<div class="imageWrap ro"> 
    <div class="pic"></div> 
</div> 
<div class="imageWrap"> 
    <div class="pic2"></div> 
</div> 
</div>

CSS

.container{ 
    width:600px; 
    height:400px; 
    border:1px solid red; 
    overflow:hidden; 
    white-space:nowrap; 
} 
.imageWrap{ 
    width:300px; 
    display:inline-block; 
    height:500px; 
    position:relative; 
    width:400px; 
    vertical-align:top; 
    margin-left:-70px; 
} 
.imageWrap.ro{ 
    border-right:5px solid red; 
    -webkit-transform:rotate(15deg); 
    -moz-transform:rotate(15deg); 
    transform:rotate(15deg); 
    overflow:hidden; 
    z-index:1; 
    margin-left:-100px; 
    margin-top:-80px; 
} 
.pic{ 
    background:url('http://lorempixel.com/output/nightlife-q-c-746-711-9.jpg'); 
    -webkit-transform:rotate(-15deg); 
    -moz-transform:rotate(-15deg); 
    transform:rotate(-15deg); 
    width:640px; 
    height:640px; 
    position:absolute; 
    left:-50px; 
} 
.pic2{ 
    width:400px; 
    height:400px; 
    background:url('http://lorempixel.com/output/sports-h-c-609-626-7.jpg'); 
}

Marque esta http://jsfiddle.net/fZMuJ/5/

Fuente

2012-04-18 09:40:56 sandeep

Div con borde inclinado usando CSS3?

Respuesta

Cuestiones relacionadas