Hier im Forum bekommt ihr bei euren fragen schnelle hilfe.Hier geht es rund um das Web SeitenProgrammieren.Alles rund ums Javascript,Html,Php,Css und Sql.Auf fast allen Fragen haben wir eine Antwort.
Der Soforthilfe-chat verspricht das ,was sein Name sagt. Hier sind Leute Online die sofort ihre hilfe anbieten.Seht in der OnlineListe nach und wenn einer Online ist werdet ihr auch antwort bekommen. Admine ,Moderatoren und Helfer sind unsere Spezialisten in Sachen Web Programierung
71 Unwetterwarnungen in Deutschland
Die Datenbank wurde zuletzt am 02.08.2020 17:34:28 aktualiesiert
71

Css Geometrische Figuren

Circel

HTML:

CSS:

#circle { 
   width: 140px;
   height: 140px;
   background: #037CA9; 
   border-radius: 70px;
}

2. Quadrat


#square {

   width: 140px; 

   height: 140px; 

   background: #037CA9; 

}

3. Quadrat mit Kontur


#square-border {

    background: #FFF;

    border: 10px solid #037CA9;

    height: 120px;

    width: 120px;

}

4. Oval


#oval {

   width: 200px; 

   height: 100px; 

   background: #037CA9; 

   -moz-border-radius: 100px / 50px; 

   -webkit-border-radius: 100px / 50px; 

   border-radius: 100px / 50px;

}

5. Dreieck (Nach oben)


#up-triangle {

   width: 0; 

   height: 0; 

   border-bottom: 120px solid #037CA9; 

   border-left: 60px solid transparent; 

   border-right: 60px solid transparent; 

}

6. Dreieck (Nach unten)


#down-triangle { 

   width: 0; 

   height: 0;

   border-top: 80px solid #037CA9;

   border-left: 60px solid transparent; 

   border-right: 60px solid transparent; 

}

7. Dreieck (Nach links)


#left-triangle {

   width: 0;

   height: 0;

   border-right: 100px solid #037CA9;

   border-top: 50px solid transparent;

   border-bottom: 50px solid transparent;

}

8. Dreieck (Nach rechts)


#right-triangle {

   width: 0;

   height: 0;

   border-left: 100px solid #037CA9;

   border-top: 50px solid transparent;

   border-bottom: 50px solid transparent;

}

9. Trapez


#trapezium {

   height: 0; 

   width: 80px;

   border-bottom: 80px solid #037CA9;

   border-left: 40px solid transparent;

   border-right: 40px solid transparent;

}

10. Trapez mit Kontur


#trapezium-border{

    width: 70px;

    height: 0;

    border-bottom: solid 70px #037CA9;

    border-left: solid 30px transparent;

    border-right: solid 30px transparent;

    position: relative;

    margin: 15px 0 0 -10px;

}



#trapezium-border:before{

    content: "";

    width: 58px;

    height: 0;

    border-bottom: solid 50px #fff  ;

    border-left: solid 20px transparent;

    border-right: solid 20px transparent;

    position: absolute;

    right: -14px;

    top: 10px;

} 

11. Rechteck


#rectangle {

   width: 140px; 

   height: 80px;

   background: #037CA9;

}

12. Halb abgerundetes Rechteck


#semirounded-rectangle{

    background: #037CA9;

    width: 100px;

    height: 100px;

    border-radius: 0 50px 50px 0;

}  

13. Halb abgerundetes Rechteck mit Kontur


#semirounded-rectangle-borders{

    background: #037CA9;

    width: 100px;

    height: 100px;

    position: relative;

    border-radius: 0 50px 50px 0;

}



#semirounded-rectangle-borders:before{

    background: #fff;

    content: "";

    width: 80px;

    height: 80px;

    position: absolute;

    top: 10px;

    left: 10px;

    border-radius: 0 50px 50px 0;

} 

14. Viertelkreis


#quartercircle{

    background: #037CA9;

    width: 100px;

    height: 100px;

    border-radius: 0 0 0 100px;

} 

15. Viertelkreis mit Kontur


#quartercircle-border{

    background: #037CA9;

    width: 100px;

    height: 100px;

    position: relative;

    border-radius: 0 0 0 90px;

}



#quartercircle-border:before{

    content: "";

    background: #fff;

    width: 80px;

    height: 80px;

    position: absolute;

    top: 10px;

    right: 10px;

    border-radius: 0 0 0 110px;

} 

16. Stern mit 12 Zacken


#twelve-point-star {

   height: 100px;

   width: 100px;

   background: #037CA9;

   position: absolute;

}



#twelve-point-star:before {

   height: 100px;

   width: 100px;

   background: #037CA9;

   content:"";

   position: absolute;

   /* Rotate */

   -moz-transform: rotate(30deg);

   -webkit-transform: rotate(30deg);

   -ms-transform: rotate(30deg);

   -o-transform: rotate(30deg);

   transform: rotate(30deg);

}



#twelve-point-star:after {

   height: 100px;

   width: 100px;

   background: #037CA9;

   content:"";

   position: absolute;

   /* Rotate */

   -moz-transform: rotate(-30deg);

   -webkit-transform: rotate(-30deg);

   -ms-transform: rotate(-30deg);

   -o-transform: rotate(-30deg);

   transform: rotate(-30deg);

}

17. Stern mit 12 Zacken und doppelter Kontur


#star-double-border{

    background: #fff;

    width: 60px;

    height: 60px;

    border: double 10px #037CA9;

    margin: 10px;

    position: relative;

}

	

#star-double-border:before{

    content: "";

    background: transparent;

    width: 60px;

    height: 60px;

    border: double 10px #037CA9;

    position: absolute;

    left: -10px;

    top: -10px;

    transform: rotate(30deg);

}



#star-double-border:after{

    content: "";

    background: transparent;

    width: 60px;

    height: 60px;

    border: double 10px #037CA9;

    position: absolute;

    left: -10px;

    top: -10px;

    transform: rotate(60deg);

}  

18. Stern mit 6 Zacken


#six-point-star {

   position: absolute;

   width: 0; 

   height: 0; 

   border-left: 50px solid transparent; 

   border-right: 50px solid transparent; 

   border-bottom: 80px solid #037CA9;

}



#six-point-star:after {

   content:"";

   position: absolute;

   width: 0; 

   height: 0; 

   border-left: 50px solid transparent; 

   border-right: 50px solid transparent; 

   border-top: 80px solid #037CA9;

   margin: 30px 0 0 -50px;

}

19. Stern mit 5 Zacken


#star {

   margin: 50px 0;

   position: relative;

   display: block;

   color: #037CA9;

   width: 0px;

   height: 0px;

   border-right:  100px solid transparent;

   border-bottom: 70px  solid #037CA9;

   border-left:   100px solid transparent;

   -moz-transform:    rotate(35deg);

   -webkit-transform: rotate(35deg);

   -ms-transform:     rotate(35deg);

   -o-transform:      rotate(35deg);

}



#star:before {

   border-bottom: 80px solid #037CA9;

   border-left: 30px solid transparent;

   border-right: 30px solid transparent;

   position: absolute;

   height: 0;

   width: 0;

   top: -45px;

   left: -65px;

   display: block;

   content: '';

   -webkit-transform: rotate(-35deg);

   -moz-transform:    rotate(-35deg);

   -ms-transform:     rotate(-35deg);

   -o-transform:      rotate(-35deg);

}



#star:after {

   position: absolute;

   display: block;

   color: #037CA9;

   top: 3px;

   left: -105px;

   width: 0px;

   height: 0px;

   border-right: 100px solid transparent;

   border-bottom: 70px solid #037CA9;

   border-left: 100px solid transparent;

   -webkit-transform: rotate(-70deg);

   -moz-transform:    rotate(-70deg);

   -ms-transform:     rotate(-70deg);

   -o-transform:      rotate(-70deg);

   content: '';

}

20. Stern mit gepunkteter Kontur


#star-dotted-border{

    background: #fff;

    width: 60px;

    height: 60px;

    border: dotted 10px #000;

    margin: 10px;

    position: relative;

}



#star-dotted-border:before{

    content: "";

    background: transparent;

    width: 60px;

    height: 60px;

    border: dotted 10px #000;

    position: absolute;

    left: -10px;

    top: -10px;

    transform: rotate(30deg);

}

	

#star-dotted-border:after{

    content: "";

    background: transparent;

    width: 60px;

    height: 60px;

    border: dotted 10px #000;

    position: absolute;

    left: -10px;

    top: -10px;

    transform: rotate(60deg);

} 

21. Parallelogramm


#parallelogram {

   width: 130px; 

   height: 75px;

   background: #037CA9;

   /* Skew */

   -webkit-transform: skew(20deg); 

   -moz-transform: skew(20deg); 

   -o-transform: skew(20deg);

   transform: skew(20deg);

}

22. Parallelogramm mit Kontur


#parallelogram-solid-border{

    background: #fff;

    width: 100px;

    height: 80px;

    position: relative;

    border: solid 10px #037CA9;

    margin-left: -10px;

    transform: skew(-15deg);

} 

23. Parallelogramm mit gestrichelter Kontur


#parallelogram-dashed-border{

    background: #fff;

    width: 100px;

    height: 80px;

    position: relative;

    border: dashed 10px #037CA9;

    margin-left: -10px;

    transform: skew(-15deg);

}  

24. Fünfeck


#pentagon {

    position: relative;

    width: 54px;

    border-width: 50px 18px 0;

    border-style: solid;

    border-color: #037CA9 transparent;

}



#pentagon:before {

    content: "";

    position: absolute;

    height: 0;

    width: 0;

    top: -85px;

    left: -18px;

    border-width: 0 45px 35px;

    border-style: solid;

    border-color: transparent transparent #037CA9;

}

25. Sechseck


#hexagon { 

    width: 100px; 

    height: 55px; 

    background: #037CA9; 

    position: relative; 

} 



#hexagon:before { 

    content: ""; 

    position: absolute; 

    top: -25px; 

    left: 0; 

    width: 0; 

    height: 0; 

    border-left: 50px solid transparent; 

    border-right: 50px solid transparent; 

    border-bottom: 25px solid #037CA9; 

} 



#hexagon:after { 

    content: ""; 

    position: absolute; 

    bottom: -25px; 

    left: 0; 

    width: 0; 

    height: 0; 

    border-left: 50px solid transparent; 

    order-right: 50px solid transparent; 

    border-top: 25px solid #037CA9; 

}

26. Achteck


#octagon {

   width: 100px; 

   height: 100px; 

   background: #037CA9;

}



#octagon:before {

   height: 0;

   width: 40px;

   content:"";

   position: absolute; 

   border-bottom: 30px solid #037CA9;

   border-left: 30px solid white; 

   border-right: 30px solid white; 

}



#octagon:after {

   height: 0;

   width: 40px;

   content:"";

   position: absolute; 

   border-top: 30px solid #037CA9; 

   border-left: 30px solid white;  

   border-right: 30px solid white; 

   margin: 70px 0 0 0;

}

27. Pilz


#mushroom{

    position: relative;

    width: 150px;

    height: 75px;

    background: #037CA9;

    border-radius: 100% 100% 0 0 / 170% 170% 0 0;

}

	

#mushroom:after{

    position: absolute;

    content:'';

    width: 50px;

    height: 95px;

    background: #037CA9;

    left: 50%;

    margin-left: -25px;

    border-radius: 100% 100% 50% 50% / 200% 200% 30% 30%;

    top: 50%;

} 

28. Kreuz in X-Form


#cross{

background: #037CA9;

width: 33px;

height: 100px;

position: relative;

margin-left: 33px;

transform: rotate(45deg);

}



#cross:before{

background: #037CA9;

content: "";

width: 100px;

height: 33px;

position: absolute;

top: 33px;

left: -33px;

}

29. Kreuz in X-Form mit abgerundeten Kanten


#cross-rounded-borders{

    background: #037CA9;

    width: 33px;

    height: 100px;

    position: relative;

    margin-left: 33px;

    transform: rotate(45deg);

    border-radius: 20px;

}

	

#cross-rounded-borders:before{

    background: #037CA9;

    content: "";

    width: 100px;

    height: 33px;

    position: absolute;

    top: 33px;

    left: -33px;

    border-radius: 20px;

} 

30. Plus


#plus{

    background: #037CA9;

    width: 33px;

    height: 100px;

    position: relative;

    margin-left: 33px;

}



#plus:before{

    background: #037CA9;

    content: "";

    width: 100px;

    height: 33px;

    position: absolute;

    top: 33px;

    left: -33px;

} 

31. Plus mit abgerundeten Kanten


#plus-rounded-borders{

    background: #037CA9;

    width: 33px;

    height: 100px;

    position: relative;

    margin-left: 33px;

    border-radius: 20px;

}

	

#plus-rounded-borders:before{

    background: #037CA9;

    content: "";

    width: 100px;

    height: 33px;

    position: absolute;

    top: 33px;

    left: -33px;

    border-radius: 20px;

} 

32. Sprechblase


#speech-bubble {

   width: 120px; 

   height: 80px; 

   background: #037CA9;

   position: absolute;

   -moz-border-radius: 10px; 

   -webkit-border-radius: 10px; 

   border-radius: 10px;

}



#speech-bubble:before {

   content:"";

   position: absolute;

   width: 0;

   height: 0;

   border-top: 13px solid transparent;

   border-right: 26px solid #037CA9;

   border-bottom: 13px solid transparent;

   margin: 13px 0 0 -25px;

}

33. Ei


#egg {

   display:block;

   width:126px; 

/* width has to be 70% of height */

/* could use width:70%; in a square container */

   height:180px;

   background-color:#037CA9;

   

/* beware that Safari needs actual

 px for border radius (bug) */

   -webkit-border-radius:63px 63px 63px 63px/

   108px 108px 72px 72px;

   /* fails in Safari, but overwrites in Chrome */

   border-radius:50% 50% 50% 50%/60% 60% 40% 40%;

}

34. Pacman


#pacman {

    width: 0px;

    height: 0px;

    border-right: 60px solid transparent;

    border-top: 60px solid #037CA9;

    border-left: 60px solid #037CA9;

    border-bottom: 60px solid #037CA9;

    border-top-left-radius: 60px;

    border-top-right-radius: 60px;

    border-bottom-left-radius: 60px;

    border-bottom-right-radius: 60px;

}

35. Biohazard


#biohazard {

  width: 0;

  height: 0;

  border-bottom: 60px solid black;

  border-top: 60px solid black;

  border-left: 60px solid yellow;

  border-right: 60px solid yellow;

  -moz-border-radius: 60px; 

  -webkit-border-radius: 60px; 

  border-radius: 60px;

}

36. Herz


#heart { 

    position: relative;

}



#heart:before, #heart:after {

    position: absolute;

    content: "";

    left: 70px; top: 0;

    width: 70px;

    height: 115px;

    background: #037CA9;

    -moz-border-radius: 50px 50px 0 0;

    border-radius: 50px 50px 0 0;

    -webkit-transform: rotate(-45deg);

    -moz-transform: rotate(-45deg);

    -ms-transform: rotate(-45deg);

    -o-transform: rotate(-45deg);

    transform: rotate(-45deg);

    -webkit-transform-origin: 0 100%;

    -moz-transform-origin: 0 100%;

    -ms-transform-origin: 0 100%;-o-transform-origin: 0 100%;transform-origin: 0 100%;

} 

	

#heart:after {

    left: 0; 

    -webkit-transform: rotate(45deg); 

    -moz-transform: rotate(45deg); 

    -ms-transform: rotate(45deg); 

    -o-transform: rotate(45deg); 

    transform: rotate(45deg); 

    -webkit-transform-origin: 100% 100%;

    -moz-transform-origin: 100% 100%; 

    -ms-transform-origin: 100% 100%;

    -o-transform-origin: 100% 100%; 

    transform-origin :100% 100%;

}

37. Unendlichkeit


#infinity { 

    position: relative; 

    width: 212px; 

    height: 100px; 

} 



#infinity:before, #infinity:after { 

    content: ""; 

    position: absolute; 

    top: 0; left: 0; 

    width: 60px; 

    height: 60px; 

    border: 20px solid #037CA9; 

    -moz-border-radius: 50px 50px 0 50px; 

    border-radius: 50px 50px 0 50px; 

    -webkit-transform: rotate(-45deg); 

    -moz-transform: rotate(-45deg); 

    -ms-transform: rotate(-45deg); 

    -o-transform: rotate(-45deg); 

    transform: rotate(-45deg); 

} 



#infinity:after { 

    left: auto; 

    right: 0; 

    -moz-border-radius: 50px 50px 50px 0; 

    border-radius: 50px 50px 50px 0; 

    -webkit-transform: rotate(45deg); 

    -moz-transform: rotate(45deg); 

    -ms-transform: rotate(45deg); 

    -o-transform: rotate(45deg); 

    transform: rotate(45deg); 

}

38. Diamant


#diamond { 

    width: 0; 

    height: 0; 

    border: 50px solid transparent; 

    border-bottom-color: #037CA9; 

    position: relative; 

    top: -50px; 

} 



#diamond:after { 

    content: ''; 

    position: absolute; 

    left: -50px; top: 50px; 

    width: 0; height: 0; 

    border: 50px solid transparent; 

    border-top-color: #037CA9; 

}

39. Diamant mit abgeflachtem Kopfteil


#diamond-shield { 

    width: 0; 

    height: 0; 

    border: 50px solid transparent; 

    border-bottom: 20px solid #037CA9; 

    position: relative; top: -50px; 

} 



#diamond-shield:after { 

    content: ''; 

    position: absolute; 

    left: -50px; 

    top: 20px; 

    width: 0; 

    height: 0; 

    border: 50px solid transparent; 	

40. Diamant (schmal)


#diamond-narrow { 

    width: 0;

    height: 0; 

    border: 50px solid transparent; 

    border-bottom: 70px solid #037CA9; 

    position: relative; 

    top: -50px; 

} 



#diamond-narrow:after { 

    content: ''; 

    position: absolute; 

    left: -50px; 

    top: 70px; 

    width: 0; 

    height: 0; 

    border: 50px solid transparent; 

    border-top: 70px solid #037CA9;

}	

41. Diamant mit abgeschnittenem Kopfteil


#cut-diamond { 

    border-style: solid; 

    border-color: transparent transparent #037CA9 transparent; 

    border-width: 0 25px 25px 25px; 

    height: 0; 

    width: 50px; 

    position: relative; 

    margin: 20px 0 50px 0; 

} 



#cut-diamond:after { 

    content: ""; 

    position: absolute; 

    top: 25px; 

    left: -25px; 

    width: 0; 

    height: 0; 

    border-style: solid; 

    border-color: #037CA9 transparent transparent transparent; 

    border-width: 70px 50px 0 50px; 

}	

42. Yin und Yang


#yin-yang { 

    width: 96px; 

    height: 48px; 

    background: #eee; 

    border-color: #037CA9; 

    border-style: solid; 

    border-width: 2px 2px 50px 2px; 

    border-radius: 100%; 

    position: relative; 

} 



#yin-yang:before { 

    content: ""; 

    position: absolute; 

    top: 50%; 

    left: 0; 

    background: #eee; 

    border: 18px solid #037CA9; 

    border-radius: 100%; 

    width: 12px; height: 12px; 

} 



#yin-yang:after { 

    content: ""; 

    position: 

    absolute; 

    top: 50%; 

    left: 50%; 

    background: #037CA9; 

    border: 18px solid #eee; 

    border-radius:100%; 

    width: 12px; 

    height: 12px; 

}	

43. Abzeichen/Band


#badge-ribbon { 

    position: relative; 

    background: #037CA9; 

    height: 100px; 

    width: 100px; 

    -moz-border-radius: 50px; 

    -webkit-border-radius: 50px; 

    border-radius: 50px; 

} 



#badge-ribbon:before, #badge-ribbon:after { 

    content: ''; 

    position: absolute; 

    border-bottom: 70px solid #037CA9; 

    border-left: 40px solid transparent; 

    border-right: 40px solid transparent; 

    top: 70px; 

    left: -10px; 

    -webkit-transform: rotate(-140deg); 

    -moz-transform: rotate(-140deg); 

    -ms-transform: rotate(-140deg); 

    -o-transform: rotate(-140deg); 

} 



#badge-ribbon:after { 

    left: auto; 

    right: -10px; 

    -webkit-transform: rotate(140deg); 

    -moz-transform: rotate(140deg); 

    -ms-transform: rotate(140deg); 

    -o-transform: rotate(140deg); 

}	

44. Space Invader


#space-invader{ 

    box-shadow: 0 0 0 1em #037CA9, 0 1em 0 1em #037CA9, -2.5em 1.5em 0 .5em #037CA9, 2.5em 1.5em 0 .5em #037CA9, -3em -3em 0 0 #037CA9, 3em -3em 0 0 #037CA9, -2em -2em 0 0 #037CA9, 2em -2em 0 0 #037CA9, -3em -1em 0 0 #037CA9, -2em -1em 0 0 #037CA9, 2em -1em 0 0 #037CA9, 3em -1em 0 0 #037CA9, -4em 0 0 0 #037CA9, -3em 0 0 0 #037CA9, 3em 0 0 0 #037CA9, 4em 0 0 0 #037CA9, -5em 1em 0 0 #037CA9, -4em 1em 0 0 #037CA9, 4em 1em 0 0 #037CA9, 5em 1em 0 0 #037CA9, -5em 2em 0 0 #037CA9, 5em 2em 0 0 #037CA9, -5em 3em 0 0 #037CA9, -3em 3em 0 0 #037CA9, 3em 3em 0 0 #037CA9, 5em 3em 0 0 #037CA9, -2em 4em 0 0 #037CA9, -1em 4em 0 0 #037CA9, 1em 4em 0 0 #037CA9, 2em 4em 0 0 #037CA9; 

	background: #037CA9; 

	width: 1em; 

	height: 1em; 

	overflow: hidden; 

	margin: 50px 0 70px 65px; 

}	

45. Fernseher


#tv { 

    position: relative; 

    width: 200px; 

    height: 150px; 

    margin: 20px 0; 

    background: #037CA9; 

    border-radius: 50% / 10%; 

    color: white; 

    text-align: center; 

    text-indent: .1em; 

} 



#tv:before { 

    content: ''; 

    position: absolute; 

    top: 10%; bottom: 10%; 

    right: -5%; 

    left: -5%; 

    background: inherit; 

    border-radius: 5% / 50%; 

}	

46. Winkel


#chevron:before { 

    content: ''; 

    position: absolute; 

    top: 0; left: 0; 

    height: 100%; 

    width: 51%; 

    background: #037CA9; 
    transform: skew(0deg, 6deg); 

} 



#chevron:after { 

    content: ''; 

    position: absolute; 

    top: 0; 

    right: 0; 

    height: 100%; 

    width: 50%; 

    background: #037CA9; 
    transform: skew(0deg, -6deg); 

}	

47. Lupe


#magnifying-glass { 

    font-size: 10em; /* This controls the size. */ 

    display: inline-block; 

    width: 0.4em; 

    height: 0.4em; 

    border: 0.1em solid #037CA9; 

    position: relative; 

    border-radius: 0.35em; 

} 



#magnifying-glass::before { 

    content: ""; 

    display: inline-block; 

    position: absolute; 

    right: -0.25em; 

    bottom: -0.1em; 

    border-width: 0; 

    background: #037CA9; 

    width: 0.35em; 

    height: 0.08em; 

    -webkit-transform: rotate(45deg); 

    -moz-transform: rotate(45deg); 

    -ms-transform: rotate(45deg); 

    -o-transform: rotate(45deg); 

}	

48. Gekrümmter Pfeil


#curvedarrow { 

    position: relative; 

    width: 0; 

    height: 0; 

    border-top: 9px solid transparent; 

    border-right: 9px solid #037CA9; 
transform: rotate(10deg); 

} 



#curvedarrow:after { 

    content: ""; 

    position: absolute; 

    border: 0 solid transparent; 

    border-top: 3px solid #037CA9; 

    border-radius: 20px 0 0 0; 

    top: -12px; 

    left: -9px; 

    width: 12px; 

    height: 12px; 
transform: rotate(45deg); 

}	

49. Pfeil (Nach rechts)


#left-to-right-arrow {

    position: relative;

    width: 0;

    height: 0;

    border-top: 8px solid transparent;

    border-right: 8px solid #037CA9;
    transform: rotate(-45deg);

    margin: auto;

}



#left-to-right-arrow:after {

    content: "";

    position: absolute;

    width: 0;

    height: 0;
    border-top: 5px solid transparent;
    border-right: 10px solid #037CA9;
    transform: rotate(60deg);

    margin-left: -2px;

    margin-top: -9px;

}	

50. Aktualisieren

HTML:

CSS:

.outer_circle {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 500px;
    height: 500px;
    background: #037CA9;
    border-radius: 250px;
}

.inner_circle { 
    position: absolute;
    left: 50px;
    top: 50px;
    width: 400px;
    height: 400px;
    background: #FFF;
    border-radius: 250px;
}

.square {
    position: absolute;
    left: 420px;
    top: 90px;
    width: 100px;
    height: 125px;
    background: #FFF;
}
.triangle1 {
    position: absolute;
    left: 360px;
    top: 50px;
    width: 0px;
    height: 0px;
    border-style: solid;
    border-width: 0 0 100px 100px;
    border-color: transparent transparent #037CA9 transparent;
}

#reduce {
    transform: rotate(15deg) scale(0.2);
    margin-top: 30px;
}	

51. 8Zack Sternt

HTML:

CSS:

 #stern8 {

background: #ffcc00;
width: 80px;
height: 80px;
position: relative;
text-align: center;
transform: rotate(20eg);

}

#stern8:before {
content: "";
position: absolute;
top: 0;
left: 0;
height: 80px;
width: 80px;
background: #ffcc00;
transform: rotate(135deg);
}

51. 12Zack Sternt

HTML:

CSS:


#stern12 {
background: #ffcc00;
width: 80px;
height: 80px;
position: relative;
text-align: center;
}

#stern12:before, #stern12:after {
content: "";
position: absolute;
top: 0;
left: 0;
height: 80px;
width: 80px;
background: #ffcc00;
}

#stern12:before {
transform: rotate(30deg);
}

#stern12:after {
transform: rotate(60deg);
}