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);
Comments
Post a Comment