Div mit schrägen Rahmen mit CSS3?

Ich erstelle ein JavaScript-Widget, das die Größe von benachbarten divs ändert, um mehr vom Hintergrundbild des divs anzuzeigen, wenn der Benutzer darauf schwebt. Das ist einfach genug und funktioniert gut mit den Divs, die (offensichtlich) gerade Kanten haben. Die Randkante muss jedoch "schräg" sein.Div mit schrägen Rahmen mit CSS3?

Gibt es einen einfachen Weg mit CSS3, um eine schräge Grenze zwischen 2 DOM-Elementen zu machen?

Ich habe css3-Transformationen (nämlich Skew) und die diagonale Randtrick (mit halber Farbe, halb Transparenz), aber keiner von ihnen scheint in der Lage zu erreichen, was ich brauche.

Die Wirkung ich versuche zu erreichen, wie in diesem Bild:

diaglonal border between dom elements

Quelle

2012-04-18 David Downes

+1 einfach für die Wahl des Beispielbild. –

Sie könnten Ihr Bild technisch in eine gedrehte (siehe CSS3 transform: rotate(<X>deg)) <div/> einbetten, und drehen Sie dann das eingebettete Bild mit einem umgekehrten Winkel.

Alternativ können Sie SVG (mit <clipPath>) verwenden, um diesen Effekt zu erzielen. Plus SVG eingebettet in <object/> Tags können JavaScript verwenden, so dass der responsive Teil Teil der Fahrt sein kann.

Beide JSFiddle sind auf dem Weg.

EDIT1: CSS Version: http://jsfiddle.net/kU3tu/
EDIT2: SVG Version: http://jsfiddle.net/b2JJK/

Quelle

2012-04-18 09:09:35 Iso

Vielen Dank für Ihre Antworten! Leider haben sich die Prioritäten geändert, und ich hatte noch keine Gelegenheit, diese Lösungen zu implementieren, aber wenn ich mir die Fiedeln ansehe, werden sie sicher funktionieren, wenn ich endlich dazu komme! –

Die Lösung, die ich denken kann ist zwei absolut positionierten Bilder und einen div-Container mit Überlauf, um verstecktes Set zu verwenden.

Die rot und grün sind Bilder (rot könnte von oben kürzer sein und grün könnte von unten kürzer sein, da diese Teile sowieso nicht sichtbar sind). Blau ist der Container mit Überlauf: versteckt.

Image

Aber diese Lösung erfordert die Bilder drehen, die nicht richtig sein könnte für Sie verwenden.

Die zweite Lösung wäre, ein Bild und ein Trennzeichen zu verwenden, das nur ein gedrehter Rand ist. Aber in diesem Fall könntest du schon vorher ein entsprechendes Bild ohne Hacks erstellen.

Quelle

2012-04-18 09:04:11

Die zweite Option ist nicht durchführbar, da sich das Rahmenbild ändern müsste, wenn die Grenze von Seite zu Seite verschoben wird. Die erste Option, die ich vielleicht ausprobieren könnte, ich denke, ich könnte versuchen, das Bild selbst gegenläufig zu drehen, um die Rotation des Div ... –

ich von meiner Seite aus versucht haben, das ist Ihnen helfen.

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

prüfen diese http://jsfiddle.net/fZMuJ/5/

Quelle

2012-04-18 09:40:56 sandeep

Div mit schrägen Rahmen mit CSS3?

Antwort

Verwandte Themen