It is very easy to draw shapes in HTML web page using CSS, for
various applications. This is very common requirement for many UI developers to
come up with elegant web pages to suit your client requirements. There are many
ways to draw UI component on the HTML web page, there are different framework
support different methods to draw. But you can easily draw Shapes on HTML web
page using CSS and almost every web browser is capable of rendering without any
issue. But if you use some frameworks to design your web UI, there might have
some limitations specially for different browsers.
In this example I am going to draw a Circle on your webpage.
There are two sections that you need to add to complete this task. First you
need to add HTML component, where the object actually resides on the web page. Next
is to change the look and feel of the HTML component to see like Circle. We
call it as change the style. For that we need apply some style using CSS.
Here is the HTML page.
<html> <head>
</head>
<body>
<div id="circle"></div>
<body>
</html>You have to define, HTML header and body parts. In the body part, we put a <DIV> to render our Circle shape.
<div id="circle"></div>We give an ID called “circle” to our <DIV>. We can use
this ID to refer our HTML component in CSS code to change the appearance of the
component. If you have two HTML components you can give two different IDs and
use them to refer in CSS code differently.
<style> #circle {
width: 50px;
height: 50px;
-webkit-border-radius: 25px;
-moz-border-radius: 25px;
border-radius: 25px;
background: red;
}
</style>Under header section of HTML page, you have to define your
CSS style code.
<head></head>#circle is referring to HTML DIV with ID “circle”, and apply
above style to that component only. That is why we need to specify the DIV ID
here.
Then we give height and width to 50 pixels, set border radius
to 25 pixels and change background color of the circle to red. You can change
these properties as you wish to change the look and feel of your circle.
Complete code:
<html> <head>
<style>
#circle {
width: 50px;
height: 50px;
-webkit-border-radius: 25px;
-moz-border-radius: 25px;
border-radius: 25px;
background: red;
}
</style>
</head>
<body>
<div id="circle"></div>
<body>
</html>Above code generate, A HTML page with red circle.
Posts
