Div avec bord incliné en utilisant CSS3? [dupliquer]
Cette question a déjà une réponse ici:
- divs adjacents avec des bordures en angle? [dupliquer] 3 réponses
je crée un widget javascript qui redimensionne les divs voisines, pour révéler plus de l'image de fond de la div quand l'utilisateur plane dessus. C'est assez simple, et fonctionne bien avec les divs ayant des bords droits (évidemment.) Toutefois, les riverains de bord "besoins" pour être inclinée.
existe-t-il un moyen simple d'utiliser css3 pour faire une bordure oblique entre 2 éléments DOM?
j'ai rencontré des transformations css3 (à savoir, skew), et le truc de bordure diagonale (en utilisant la moitié de la couleur, la moitié de la transparence), mais ni l'un ni l'autre ne semblent être en mesure d'atteindre ce dont j'ai besoin.
L'effet, je suis en train de réaliser, c'est comme dans cette image:
3 réponses
Vous pourriez techniquement intégrer votre image dans une rotation (voir CSS3 transform: rotate(<X>deg)) <div/>, puis tourner l'image embeddée avec un angle inverse.
alternativement, vous pouvez utiliser SVG (avec <clipPath>) pour obtenir cet effet. Plus SVG embedded in <object/> les tags peuvent utiliser JavaScript, donc la partie responsive peut faire partie du tour.
les deux JSFiddle sont en route.
edit 1: CSS Version:http://jsfiddle.net/kU3tu/
EDIT2: Version SVG:http://jsfiddle.net/b2JJK/
j'ai essayé de mon côté peut que vous aider.
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');
}
Cochez cette http://jsfiddle.net/fZMuJ/5/
la solution à laquelle je peux penser est d'utiliser deux images absolument positionnées et un conteneur div avec débordement réglé sur caché.
le rouge et le vert sont des images (le rouge pourrait être plus court du haut et le vert pourrait être plus court du bas car ces parties ne sont pas visibles de toute façon). Bleu est le conteneur avec débordement: caché.
mais cette solution nécessite de faire tourner les images, ce qui pourrait ne pas être le bon pour vous utiliser.
la deuxième solution serait d'utiliser une image et un div séparateur étant juste un bord rotatif. Mais dans ce cas vous pourriez préparer l'image appropriée avant de toute façon sans avoir besoin de piratages.