tutorials.de Buch-Aktion 05/2012
Like Tree2Danke
  • 1 Beitrag von CPoly
  • 1 Beitrag von javaDeveloper2011
ERLEDIGT
JA
ANTWORTEN
3
ZUGRIFFE
771
EMPFEHLEN
  • An Twitter übertragen
  • An Facebook übertragen
AUF DIESES THEMA
ANTWORTEN
  1. 04.12.11 14:35 #1
    exestend exestend ist offline Mitglied
    Registriert seit
    Mar 2007
    Beiträge
    15
    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
    Angehängte Grafiken Angehängte Grafiken  
     
    Zitieren Zitieren
  2. 04.12.11 15:15 #2
    CPoly CPoly ist offline Mitglied Weizenbier
    tutorials.de Premium-User
    Registriert seit
    Sep 2009
    Beiträge
    2.445
    Bitte sehr

    HTML-Code:
    <!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
    Geändert von CPoly (04.12.11 um 15:20 Uhr)
    exestend bedankt sich. 
    Zitieren Zitieren
  3. 04.12.11 15:29 #3
    Avatar von javaDeveloper2011
    javaDeveloper2011 javaDeveloper2011 ist offline Mitglied Brokat
    Registriert seit
    Feb 2011
    Beiträge
    445
    Blog-Einträge
    5
    Hi,

    wenn du noch ne Lösung sehen willst:

    Code :
    1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

    <!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!
    Geändert von javaDeveloper2011 (04.12.11 um 15:33 Uhr)
    exestend bedankt sich. 
    Zitieren Zitieren
  4. 04.12.11 16:44 #4
    exestend exestend ist offline Mitglied
    Registriert seit
    Mar 2007
    Beiträge
    15
    Na Mensch, auf die Idee hätte ich ja auch selbst kommen können...eigentlich
    Besten Dank !
     
    Zitieren Zitieren
« Slide-Menü | CSS Transition bei Gradients »

Ähnliche Themen

  1. CSS3 & IE9
    Von the_black_hawk im Forum CSS
    Antworten: 5
    Letzter Beitrag: 11.08.11, 14:34
  2. CSS3 Keyframes - Animation
    Von SteveJobs im Forum CSS
    Antworten: 2
    Letzter Beitrag: 28.06.11, 10:06
  3. CSS3-Animationen - Keyframes
    Von lehanky im Forum CSS
    Antworten: 0
    Letzter Beitrag: 29.10.09, 17:57
  4. CSS3 Rounded Corners
    Von Paspirgilis im Forum CSS
    Antworten: 5
    Letzter Beitrag: 22.06.09, 10:55
  5. Wann kommt CSS3
    Von Jan-Frederik Stieler im Forum CSS
    Antworten: 0
    Letzter Beitrag: 29.08.04, 19:46