How can i make this css star smaller? -


i got code below on : https://css-tricks.com/examples/shapesofcss/

i make star smaller. have try changing height , width nothing happens , how accomplish this?

i made http://jsfiddle.net/yxe3k/

.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: 10px;    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: '';  } 

one easy way use css scale transform in addition existing rotate transform:

-moz-transform:    rotate(35deg) scale(.5); -webkit-transform: rotate(35deg) scale(.5); -ms-transform:     rotate(35deg) scale(.5); -o-transform:      rotate(35deg) scale(.5); 

jsfiddle example


Comments

Popular posts from this blog

javascript - RequestAnimationFrame not working when exiting fullscreen switching space on Safari -

Python ctypes access violation with const pointer arguments -