ساخت اشکال هندسی با css3

مربع

کد:

---

#square {        width: 100px;        height: 100px;        background: red;}

---

مستطیل

کد:

---

#rectangle {        width: 200px;        height: 100px;        background: red;}

---

دایره

کد:

---

#circle {        width: 100px;        height: 100px;        background: red;        -moz-border-radius: 50px;        -webkit-border-radius: 50px;        border-radius: 50px;}/* Cleaner, but slightly less support: use "50%" as value */

---

بیضی

کد:

---

#oval {        width: 200px;        height: 100px;        background: red;        -moz-border-radius: 100px / 50px;        -webkit-border-radius: 100px / 50px;        border-radius: 100px / 50px;}/* Cleaner, but slightly less support: use "50%" as value */

---

مثلث به سمت بالا

کد:

---

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

---

مثلث به سمت گوشه راست پایین

کد:

---

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

---

ستاره

کد:

---

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

---

قلب

کد:

---

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

---

سایر شکل ها در منبع مقاله »