Kako s CSS triki do različno oblikovanih likov

V tem vodiču vam bom predstavil, kako lahko z različnimi triki CSS-ja (Cascading Style Sheets) naredimo različne oblike likov (od kvadrata do kroga ter tudi lika v obliki srca ).  Vsi ti liki so preizkušeni in večina jih je pravilno prikazanih v različnih brskalnikih (Chrome 9, Opera 11, IE 9 Beta, Mozilla Firefox 3.6) razen zadnja dva lika, ki nista pravilno prikazana v IE – kar pa tako ali tako ni nič novega za IE, saj vedno izstopa (bom pa tudi to probal v kratkem popraviti in nato bom posodobil kodo).

Kvadrat

 

 

#kvadrat {
	width: 80px;
	height: 80px;
	background-color: #FC003F;
}

Pravokotnik

 

 

#pravokotnik {
	width: 200px;
	height: 100px;
	background-color: #219BFF;
}

Krog

 

#krog {
	width: 100px;
	height: 100px;
	background-color: #0CF;
	-moz-border-radius: 50px;
	-webkit-border-radius: 50px;
	border-radius: 50px;
}

Trikotnik – obrnjen navzgor

 

 

#trikotnik-obrnjen-navzgor {
	width: 0;
	height: 0;
	border-left: 50px solid transparent;
	border-right: 50px solid transparent;
	border-bottom: 100px solid #F93;
}

Trikotnik – obrnjen navzdol

#trikotnik-obrnjen-navzdol {
	width: 0;
	height: 0;
	border-left: 50px solid transparent;
	border-right: 50px solid transparent;
	border-top: 100px solid #F93;
}

Zvezda

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

Srce

#srce {
    position: relative;
    width: 100px;
    height: 90px;
}
#srce:before,
#srce:after {
    position: absolute;
    content: "";
    left: 50px;
    top: 0;
    width: 50px;
    height: 80px;
    background: #F93;
    -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%;
}
#srce: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%;
}

Znak Infinity

#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 #F93;
    -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);
}