html - style - Div con borde inclinado utilizando CSS3?

html group tag

Question

Esta pregunta ya tiene una respuesta aquí:

• Divs adyacentes con bordes en ángulo? [duplicar] 3 respuestas

Estoy creando un widget de javascript que redimensiona los divs vecinos, para revelar más imagen de fondo del div cuando el usuario se cierne sobre él. Esto es bastante simple y funciona bien con los divs que tienen bordes rectos (obviamente). Sin embargo, el borde limítrofe "necesita" ser inclinado.

¿Hay una forma sencilla de usar css3 para hacer un borde inclinado entre 2 elementos DOM?

Me he encontrado con las transformaciones de css3 (es decir, sesgo) y el truco de borde diagonal (usando medio color, medio 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:

Answer 1

La solución que se me ocurre es usar dos imágenes con una posición absoluta y un contenedor div con el desbordamiento configurado para ocultarlo.

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

Image

Pero esta solución requiere rotar las imágenes, lo que podría no ser adecuado para su uso.

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

Answer 2

Lo he intentado desde mi lado tal vez eso te ayude.

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

En

Compruebe esto http://jsfiddle.net/fZMuJ/5/

Answer 3

Técnicamente, podría incrustar su imagen en un transform: rotate(<X>deg) (ver transform: rotate(<X>deg) de CSS3 transform: rotate(<X>deg) ) <div/> , y luego rotar la imagen incrustada con un ángulo inverso.

Alternativamente, puedes usar SVG (con <clipPath> ) para lograr este efecto. Además, las etiquetas SVG integradas en <object/> pueden usar JavaScript, por lo que la parte sensible puede ser parte del viaje.

Ambos JSFiddle están en camino.

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