✔ CSS3 Schräge Ecken ?

E

exestend

Mitglied
Ich habe mal einen Anhang hochgeladen um es Optisch dar zu stellen. Mit Photoshop ja kein Problem, aber mit CSS3 wäre das schon sehr viel schöner oder eben canves.

Weiß jemand wie man das hin bekommt ?

LG
 

Anhänge

  • schräge Ecken.png
    schräge Ecken.png
    3,8 KB · Aufrufe: 3.197
Bitte sehr

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:
Hi,

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:
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück