CSS3 Properties & Animation
Check Out : New properties of CSS3 and CSS Animation
How to make a perfect Pie chart using CSS Gradients
You just need to provide border-radius 50% to remove a corner of a given area/square/rectangle. If you want to start your color at a specified angle, then you must provide the color name with starting angle & the same color name with the ending angle. Ending angle of last color need not to be provided. It automatically ends & fills the color.
<html>
<head>
<style>
#d1{
height: 200px;
width: 200px;
background-image: conic-gradient(Pink,pink ,purple,purple,green,green,blue);
border-radius:50%;
}
#d2{
height: 200px;
width: 200px;
background-image: conic-gradient(Pink 0deg,pink 90deg,purple 90deg,purple 180deg,green 180deg,green 270deg,blue 270deg);
border-radius:50%;
}
</style>
</head>
<body>
<h1>Pie Chart using Conic Gradient</h1>
<div id="d1"></div><br><br>
<div id="d2"></div><br><br>
</body>
</html>Look at the output of above code
Pie Chart using Conic Gradient
CSS 1 & CSS 3 Properties
Check it out : CSS 3 Properties : Border , Background & Gradient & CSS 1 Property : Background
One Mark Questions for HTML, CSS & JavaScript
Question Bank of HTML, CSS, JavaScript & networking concept : All these questions are of one mark only. It may be asked in your examination.
CSS Pseudo
CSS pseudo is a special state of an element. It is used to style for links, divisions any many other elements.