Alakzatok CSS-el (pt1)

Némileg hasznosabb bejegyzéssel szolgálnék, amelyet leginkább a webfejlesztők fognak értékelni. Egy tegnapi Google+ megosztás során akadtam ezen cikkre, melyet szeretnék megosztani itt is, hiszen hasznos lehet azoknak, akik épp weboldalt építenek.

Lényegében egy lista, amely olyan CSS kódokat tartalmaz, melyek az adott szimbólumot, sokszöget rajzolják ki oda, ahol használjuk.

A listát két részre bontottam, előbb az egyszerűbb alakzatok, sokszögek, majd később a bonyolultabb, összetettebb ábrák kerülnek terítékre.

Remélem hasznosnak bizonyul, a megosztásért pedig köszönet Nádasdi Balázsnak. Nem is rabolnám tovább az időt, válogassatok. :)

Négyzet

#square {

width: 100px;

height: 100px;

background: dodgerblue;

}

Téglalap

#rectangle {

width: 200px;

height: 100px;

background: dodgerblue;

}

Kör

#circle {
width: 100px;
height: 100px;
background: dodgerblue;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
border-radius: 50px;
}

Ovális

#oval {
width: 200px;
height: 100px;
background: dodgerblue;
-moz-border-radius: 100px / 50px;
-webkit-border-radius: 100px / 50px;
border-radius: 100px / 50px;
}

Háromszög #1

#triangle-up {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid dodgerblue;
}

Háromszög #2

#triangle-down {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-top: 100px solid dodgerblue;
}

Háromszög #3

#triangle-left {
width: 0;
height: 0;
border-top: 50px solid transparent;
border-right: 100px solid dodgerblue;
border-bottom: 50px solid transparent;
}

Háromszög #4

#triangle-right {
width: 0;
height: 0;
border-top: 50px solid transparent;
border-left: 100px solid dodgerblue;
border-bottom: 50px solid transparent;
}

Háromszög #5 

#triangle-topleft {
width: 0;
height: 0;
border-top: 100px solid dodgerblue;
border-right: 100px solid transparent; }

Háromszög #6

#triangle-topright {
width: 0;
height: 0;
border-top: 100px solid dodgerblue;
border-left: 100px solid transparent;
}

Háromszög #7

#triangle-bottomleft {
width: 0;
height: 0;
border-bottom: 100px solid dodgerblue;
border-right: 100px solid transparent; }

Háromszög #8

#triangle-bottomright {
width: 0;
height: 0;
border-bottom: 100px solid dodgerblue;
border-left: 100px solid transparent;
}

Görbe nyíl (Ando Razafimandimby)

#curvedarrow {
  position: relative;
  width: 0;
  height: 0;
  border-top: 9px solid transparent;
  border-right: 9px solid dodgerblue;
  -webkit-transform: rotate(10deg);
  -moz-transform: rotate(10deg);
  -ms-transform: rotate(10deg);
  -o-transform: rotate(10deg);
}
#curvedarrow:after {
  content: "";
  position: absolute;
  border: 0 solid transparent;
  border-top: 3px solid dodgerblue;
  border-radius: 20px 0 0 0;
  top: -12px;
  left: -9px;
  width: 12px;
  height: 12px;
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
}

Trapéz

#trapezoid {
border-bottom: 100px solid dodgerblue;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
height: 0;
width: 100px;
}

Parallelogramma

#parallelogram {
width: 150px;
height: 100px;
-webkit-transform: skew(20deg);
  -moz-transform: skew(20deg);
    -o-transform: skew(20deg);
background: dodgerblue;
}

Hat ágú csillag

#star-six {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid dodgerblue;
position: relative;
}
#star-six:after {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-top: 100px solid dodgerblue;
position: absolute;
content: "";
top: 30px;
left: -50px;
}

Öt ágú csillag (Kit MacAllister)

#star-five {
   margin: 50px 0;
   position: relative;
   display: block;
   color: dodgerblue;
   width: 0px;
   height: 0px;
   border-right:  100px solid transparent;
   border-bottom: 70px  solid dodgerblue;
   border-left:   100px solid transparent;
   -moz-transform:    rotate(35deg);
   -webkit-transform: rotate(35deg);
   -ms-transform:     rotate(35deg);
   -o-transform:      rotate(35deg);
}
#star-five:before {
   border-bottom: 80px solid dodgerblue;
   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-five:after {
   position: absolute;
   display: block;
   color: dodgerblue;
   top: 3px;
   left: -105px;
   width: 0px;
   height: 0px;
   border-right: 100px solid transparent;
   border-bottom: 70px solid dodgerblue;
   border-left: 100px solid transparent;
   -webkit-transform: rotate(-70deg);
   -moz-transform:    rotate(-70deg);
   -ms-transform:     rotate(-70deg);
   -o-transform:      rotate(-70deg);
   content: '';
}

Ötszög

#pentagon {
    position: relative;
    width: 54px;
    border-width: 50px 18px 0;
    border-style: solid;
    border-color: dodgerblue 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 dodgerblue;
}

Hatszög

#hexagon {
width: 100px;
height: 55px;
background: dodgerblue;
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 dodgerblue;
}
#hexagon:after {
content: "";
position: absolute;
bottom: -25px;
left: 0;
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-top: 25px solid dodgerblue;
}

Nyolcszög

#octagon {
width: 100px;
height: 100px;
background: dodgerblue;
position: relative;
}
#octagon:before {
content: "";
position: absolute;
top: 0;
left: 0;  
border-bottom: 29px solid dodgerblue;
border-left: 29px solid #eee;
border-right: 29px solid #eee;
width: 42px;
height: 0;
}
#octagon:after {
content: "";
position: absolute;
bottom: 0;
left: 0;  
border-top: 29px solid dodgerblue;
border-left: 29px solid #eee;
border-right: 29px solid #eee;
width: 42px;
height: 0;
}