Tiger Bird Webdesign: CSS Hearty Heart

Friday, 7 November 2014

CSS Hearty Heart

True Heart

Make two div elements in html and use the border-radius property to round the corners. Each corner of the rectangle can be shaped individually. In this example, the top corners are smoothed away with with border-top-left-radius and border-top-right-radius. The left rectangle which is in red has the property position:absolute and is rotated 45°. The left rectangle colored in pink is positioned relatively to the red part and is rotated 270°.

CSS Code

/*the file is called true_heart.css*/
#left_part
{position:absolute;
top:200px;
left:300px;
width:50px;
height:80px;
background-color:pink;
-ms-transform:rotate(45deg);
-webkit-trasform:rotate(45deg);
transform:rotate(45deg);
border-top-left-radius:100px;
border-top-right-radius:100px;
}

#right_part
{position:relative;
top:-50px;
width:50px;
height:80px;
background-color:red;
-ms-transform:rotate(270deg);
-webkit-transform:rotate(270deg);
transform:rotate(270deg);
-ms-transform-origin: right bottom;
-webkit-transform-origin: right bott0m;
transform-origin: right bottom;
border-top-left-radius:100px;
border-top-right-radius:100px;
}

HTML Code

<!Doctype html>
</html>
<head>
<title>True Heart</title>
<link rel="stylesheet" type="css/text" href="true_heart.css">
</head>

<body>

<div id="left_part">
<div id="right_part">
</div>
</div>
</body>

</html>

Tiger Bird Webdesign

Friday, 7 November 2014

CSS Hearty Heart

CSS Code

HTML Code

No comments:

Post a Comment