✔ CSS3 Schräge Ecken ?
- Themenstarter exestend
- Beginndatum
Bitte sehr
Edit: Das ist übrigens CSS 2
HTML:
<!DOCTYPE html>
<html>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Eckige Rundungen :-D</title>
<style type="text/css">
#box {
background:#000;
width:200px;
height:200px;
position:relative;
top:40px;
}
#box:before, #box:after {
content: "";
display:block;
position:absolute;
background:transparent;
width:120px;
height:0px;
border:40px solid transparent;
}
#box:before {
border-bottom-color:#000;
border-top:none;
top:-40px;
}
#box:after {
border-top-color:#000;
border-bottom:none;
bottom:-40px;
}
</style>
<div id="box">woooot</div>
</html>Edit: Das ist übrigens CSS 2
Zuletzt bearbeitet:
javaDeveloper2011
Erfahrenes Mitglied
Hi,
wenn du noch ne Lösung sehen willst:
Also CSS3 ist beides nicht, aber die - zugegebenermaßen elegantere - Lösung von CPoly ist nicht IE6-kompatibel!
wenn du noch ne Lösung sehen willst:
Code:
<!doctype html>
<body>
<div style="margin-top: -75px; border-width: 75px; border-style: solid; border-color: white; border-bottom-color: black;"></div>
<div style="background-color: black; height: 1000px;">
<div style="position: relative; width: 850px; margin-left: auto; margin-right: auto;">
<div style="border-width: 75px; border-style: solid; border-color: black; border-bottom-color: white;"></div>
<div style="background-color: white; height: 500px;">
</div>
</div>
</div>
<div style="margin-bottom: -75px; border-width: 75px; border-style: solid; border-color: white; border-top-color: black;"></div>
</body>
</html>Also CSS3 ist beides nicht, aber die - zugegebenermaßen elegantere - Lösung von CPoly ist nicht IE6-kompatibel!
Zuletzt bearbeitet:
