<div class="corners">
Content
</div>
body {
background: #e6e6e6;
}
.corners {
background: #f6f6f6;
height: 700px;
margin: 50px auto;
max-width: 600px;
position: relative;
width: 80%;
box-shadow: 0 1px 7px hsla(0, 0%, 0%, 0.2);
}
/* Corner Effect */
.corners:after,
.corners:before {
background: #e6e6e6;
content: '';
height: 50px;
position: absolute;
top: -25px;
width: 100px;
box-shadow: 0 5px 10px -7px hsla(0, 0% ,0%, 0.5);
}
.corners:after {
left: -50px;
transform: rotate(-45deg);
}
.corners:before {
right: -50px;
transform: rotate(45deg);
}
Siehe den Pen Eingeklappte Ecken von Chris Coyier (@chriscoyier) auf CodePen.
Wow, das sind geniale Tricks..
Das ist großartig, ich werde es bald verwenden. Vielen Dank!
Dank @iKreativ haben wir den Code aktualisiert, damit er besser mit Mozilla funktioniert.
Der aktualisierte Code ist hier http://playground.genelocklin.com/tucked-corners/#updated.
Immer noch in Arbeit. Freut mich, dass es euch gefällt.
Funktioniert das in Microsoft Internet Explorer 8/7?
Es funktioniert einwandfrei in IE 9.0.3 auf Vista Ultimate x64 SP2 mit 12 GB RAM.
Das ist sehr schöne Gestaltung…
Entschuldigung, Anfänger hier! (Ja, aber wir haben alle irgendwo angefangen!).
Damit ich das richtig verstehe: Ich habe Fiddle (sehr großartig) geöffnet und wenn ich das richtig verstehe, füge ich meinen .css-Code in meine .css-Datei ein und dann meinen .html-Code auf meine Seite. Richtig?
Wenn ja, funktioniert nichts. Was könnte ich falsch machen?
Larry
JSFiddle? Füge das CSS in den Bereich ein, in dem "css" steht (standardmäßig oben rechts) und deinen HTML-Code in den Bereich "html" (standardmäßig oben links). Sobald dein Code eingefügt ist, klicke auf "run" und du bist fertig. Wenn du zu http://dabblet.com gehst, kannst du Code hinzufügen und deine Ergebnisse in Echtzeit sehen, solange deine Syntax korrekt ist.
Hallo Leute!
Ich habe mich nur gefragt, wie man es so machen könnte, dass dieselbe Klasse die Ecken unten anbringt?
Oder muss man es in zwei divs aufteilen?
Ja, vielleicht! CSS hat nur
:beforeund:afterNach der Verwendung dieses Codes ist es tatsächlich einfacher als man denkt, den abgerundeten Ecken-Effekt auf CSS-Divs anzuwenden und das Gesamtbild der Website sehr gut aussehen zu lassen.
Ich dachte, ich könnte zumindest meinen Teil dazu beitragen – ich habe auch etwas Polsterung hinzugefügt, da der Inhalt verdeckt war.
JSFiddle-Beispiel
Vielen Dank, aber für den Inhalt müssen Sie den Inhalt in ein weiteres Div legen und einige Selektoren anwenden, um etwas Rand zu erzeugen, damit der Inhalt nicht unter der eingeklappten Ecke erscheint. Es ist immer noch eine erstaunliche Idee, vielen Dank Chris :D
Wirklich schön. Vielen Dank.