Layout mit Kanten - Weiss nicht weiter

**Dee** · 06.07.2017, 01:33

Nabend zusammen

Auf dieser Seite möchte ich die Inhalte durch abgeschrägte Kanten trennen.
Das hab ich so in etwa hingekriegt, jedoch weiss ich nun nicht mehr weiter

.

OMG ist das schwer zu beschreiben

Jedes Text-Element besteht aus einem Bild, H2 und Text und hat abwechslungsweise die Hintergrundfarbe Braun oder Weiss.
Alle Elemente enthalten ein DIV mit einer Kante nach oben und ein DIV mit der Kante nach unten.
Jetzt ist das Problem bei den Bildern auf der linken Seite (rechts geht es, mit z-index

)-> Wenn ich das Bild über das DIV mit der Kante ziehe, kommt es ins darüberstehende Element.
Das habe ich versucht mit overview:hidden; zu lösen, will aber irgendwie nicht.

Link zu Seite

Die obere Kannte -> CSS

Code:

div.brown div.diagonal-oben {
    margin-bottom:-65px;
    position: relative;
        height: 50px;
        width: 100%;
        top: 25px;
        left: -10px;
        padding-top: 10px;
        padding-left: 15px;
        background-color: #eee6d9;    
        -webkit-transform: rotate(-2deg);
    z-index:-1;
}

HTML sieht so aus:

HTML-Code:

<div class="hell ce_text unser-kaffee block">

   <div class="diagonal-oben"></div>

      <div class="inside-image">
         
         <div class="inPic">
         <figure class="image_container float_above"> 
         <img src="tl_files/brunello-caffee/startseite-themenbilder/Bild1-geschnitten.png" width="3000" height="1766" alt="">
         </figure>
         </div>

         <div class="inText">
         <h2>Unser Kaffee</h2>
         <p></p>
         </div>

      </div>

<div class="diagonal-unten"></div>

</div>

Vielleicht hat wer einen Ansatz für mich, wie ich das noch hinbiegen kann.

**07alex07** · 06.07.2017, 08:34

Link zur Seite funktioniert nicht

**planepix** · 06.07.2017, 08:39

Zitat von 07alex07

Link zur Seite funktioniert nicht

Fehlt nur der Doppelpunkt

http://web1257.login-9.loginserver.c...lo-kaffee.html

**planepix** · 06.07.2017, 08:45

Hallo Dee,
so etwas ähnliches hatte ich neulich auch.

Ich habe mir das Artikeltemplate ( .mod_article ), indem ich ein umschliessendes Div ergänzt habe.
Dann dieses Template den Artikeln zuordnen und dann kann ich z.B. Hintergrundgrafiken mit CSS und ::before und ::after um jeden Artikel setzen.

**Dee** · 06.07.2017, 15:12

Danke für den Input planepix

Hast du dann für jeden dieser Abschnitte einen eigenen Artikel angelegt? Das sollte ja dann das selbe Prinzip sein wie mit den Inhaltselementen oder sehe ich da einen wesentlichen Vorteil nicht?

Hast du das dann mit Border und ::after und ::before gelöst, so wie man auch einfach Formen machen kann?

Möchte meine Neugier gleich stillen

Hast du das lediglich mit einem weiteren div und ::after und ::before verwendet?

Danke für deine Antworten

**Dee** · 06.07.2017, 21:02

So, ich hab da jetzt mal rustikal dem Haupt-div div ein ::before verpasst. Die Kante wird jetzt darüber angezeigt.
Dann habe ich ein Bild platziert und ziehe dieses über das Pseudoelement, denn das Bild soll bis zur Kante hin, welche an das nächste Elemente grenzt, kommen.

LINK

Wie kriege ich es nun hin, dass das Bild nicht darüber rausschaut?

**madi** · 07.07.2017, 09:48

Hi Dee,

du machst dir das glaube ich zu kompliziert. Lass doch einfach die Artikel rotieren und den Inhalt dann wieder entgegengesetzt rotieren, damit er wieder Horizontal steht. Dem Artikel gibtst du ein overflow:hidden, dann steht auch nichts über. Für die entgegengesetzte Rotation kannst du auch ein neues DIV in das Artikel-Template einfügen, da glaub ich nicht alle Inhaltselemente ein .block haben. Und wenn ein Browser transform nicht unterstützt, wird es ganz normal dargestellt, ohne irgendwelche CSS Verenkungen. Beispiel: https://jsfiddle.net/c9h40wbo/

HTML-Code:

<html>
<head>
	<style>
		body {
			background:blue;
		}
		.mod_article {
			margin:0 -500px;
			transform: rotate(-2deg);
			padding:100px 500px;
			overflow:hidden;
		}
		.block {
			margin:0 auto;
			max-width:960px;
			color:#FFF;
			transform: rotate(2deg);
		}
	</style>
</head>
<body>
	<div class="mod_article" style="background:blue;">
		<div class="block">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</div>
	</div>
	<div class="mod_article" style="background:red;">
		<div class="block">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</div>
	</div>
	<div class="mod_article" style="background:green;">
		<div class="block">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</div>
	</div>
</body>
</html>

**Dee** · 07.07.2017, 16:27

Hallo madi

Besten Dank für deinen Ansatz und das beigefügte Beispiel.
Gestern Nacht habe ich mit dem rotieren herumprobiert, jedoch ist es mir noch nicht gelungen.

Mein Problem ist, dass oben und unten eine andere "Rotierung" nötig ist.

Bei dieser Seite sieht man im unteren Teil gut, wie ich es gerne hätte.

Leider habe ich noch kein zufriedenstellendes Ergebnis erreicht und mir fehlt der Ansatz, wie ich diese Kante nicht nur oben sondern dann auch unten, quasi in die gegengesetzte Richtung hinkriege.

Hast du eventuell einen weiteren Tipp für mich?

Edit: Ich versuch mal mit zwei unterschiedlichen Artikel Templates, abwechslungsweise und dann von unten etwas über den obigen legen. Vielleicht klappts

**Dee** · 07.07.2017, 23:21

Supi, hat gut geklappt mit den Artikel

Danke für eure Hilfe!

**Dee** · 10.07.2017, 22:03

Leider muss ich das Thema nochmals aufgreifen

Bei den Artikeln habe ich folgendes CSS verwendet:

Code:

overflow: hidden;
margin: 0 -500px -70px;
padding: 12px 500px 70px;
background-color: #eee6d9;
transform: rotate(-2deg)

Nun habe ich das Problem, dass man auf dem Tablet, den Inhalt zur Seite schieben kann

Da die Kante bis an den Rand ersichtlich sein soll, kommt man kaum drumherum diesen über den Viewport hinaus zu ziehen.

Kann man das für Tàblets sonst noch irgendwie unterbinden?

Hier nochmals der Link

Danke für eure Inputs

**madi** · 10.07.2017, 23:07

Hast du body, html { overflow-x:hidden; } gesetzt?

Evtl. auch mal die Skalierungsmöglichkeit ausschalten:

HTML-Code:

<meta name="viewport" content="width=device-width, inital-scale=1, user-scalable=no">

Thema: Layout mit Kanten - Weiss nicht weiter

Themen-Optionen

Thema durchsuchen

Layout mit Kanten - Weiss nicht weiter

Aktive Benutzer

Aktive Benutzer

Lesezeichen

Lesezeichen

Berechtigungen

Contao

Empfohlene Webdesign-Bücher