Tiger Bird Webdesign: Star With CSS

Tuesday, 20 January 2015

Star With CSS

all cover rectangles displayed in different colors

It's time to create a star with CSS!

The first step is to create a huge square which has the tag div and the id="body27". Using invisible cover rectangles colored in white and with different degrees on the left and right site of this square forms the star shape.

A picture says more than thousand words-I've put different colors on the cover rectangles to make it crystal clear how the object is created so please have a look at the code below.

HTML and CSS Code

#body{
position:relative;
top:100px;
left:100px;
width:150px;
height:150px;
background-color:orange;
}

#left_cover{
position:absolute;
left:-35px;
height:150px;
width:75px;
-webkit-transform:skew(155deg);
-ms-transform:skew(155deg);
transform:skew(155deg);
background-color:white;
}

#right_cover{
position:absolute;
left:110px;
width:75px;
height:150px;
-webkit-transform:skew(25deg);
-ms-transform:skew(25deg);
transform:skew(25deg);
background-color:white;
}

#bottom_cover_left{
position:absolute;
top:90px;
left:0px;
width:50px;
height:150px;
-webkit-transform:rotate(55deg);
-ms-transform:rotate(55deg);
transform:rotate(55deg);
background-color:white;
}

#bottom_cover_right{
position:absolute;
left:96px;
top:90px;
width:50px;
height:150px;
-webkit-transform:rotate(125deg);
-ms-transform:rotate(125deg);
transform:rotate(125deg);
background-color:white;
}

#right_part{
position:absolute;
top:50px;
left:25px;
width:50px;
height:50px;
-webkit-transform:skew(45deg);
-ms-transform:skew(45deg);
transform:skew(45deg);
background-color:orange;
}

#left_part{
position:absolute;
top:50px;
left:75px;
width:50px;
height:50px;
-webkit-transform:skew(135deg);
-ms-transform:skew(135deg);
transform:skew(135deg);
background-color:orange;
}
</style>
</head>

Tiger Bird Webdesign

Tuesday, 20 January 2015

Star With CSS

HTML and CSS Code

No comments:

Post a Comment