Hello, friends! I’m interested in drawing in CSS. I learned that I can draw vector illustrations not only with the help of programs, but also with the help of codes. English is my second language, so excuse me for my speech errors.
It’s much more complicated, but I decided that I should start with a simple one. So in this article I’ll show you how to draw simple shapes in CSS. What is it for? Using CSS styles, you can create different drawings and beautiful blocks to design sites.
How to start drawing in CSS
To practice, you need to create two files on the computer. I do this: I create a folder with a name in the computer, for example “CSS pictures”. In this folder I create two files with names:
- html
- css
Using an HTML file, I set up and view the CSS file.
I review and edit the two files with the help of the program “Notepad ++”
Primarily in the HTML file, you need to set the basic settings, and you also need to associate the CSS file with HTML:
For this, in the html-tag you enter the name of the CSS file, as shown in the picture above.
I will draw between html-tags <body>:
Draw a circle in CSS
For example, to draw a black circle the size:
- width: 200px;
- height: 200px;
I’m writing a special <div class> tag in the html file, in which I write the name of the figure “circle”.
And in the CSS file I set the parameters of this class. Parameters should have the name “circle” too.
.circle {
width: 200px;
height: 200px;
background: #000000;
border-radius: 50%;}
To draw another shape, you need:
- Change the name of the <div class> in the HTML file;
- Title the same name settings in the CSS file;
- Prescribe the code for the desired shape;
Draw an ellipse in CSS
In the HTML file I give the name div class – “ellipse”, and in the CSS file I write the following:
.ellipse {
width: 400px;
height: 200px;
background: #FF00FF;
border-radius: 200px/100px;}
Draw a square in CSS
In the HTML file I give the name div class – “square”, and in the CSS file I write the following:
.square {
width: 150px;
height: 150px;
background: #F08080;}
Draw a triangle with a cone up in CSS
In the HTML file I give the name div class – “triangle”, and in the CSS file I write the following:
.triangle {
width: 0;
height: 0;
border-left: 100px solid transparent;
border-right: 100px solid transparent;
border-bottom: 200px solid #00FF00;}
Draw a triangle with a cone down in CSS
In the HTML file I give the name div class – “triangledown”, and in the CSS file I write the following:
.triangledown {
width: 0;
height: 0;
border-left: 100px solid transparent;
border-right: 100px solid transparent;
border-top: 200px solid #FFA500;
Draw an arrow in CSS
In the HTML file I give the name div class – “arrow”, and in the CSS file I write the following:
.arrow {
width: 120px;
height: 40px;
margin: 30px 30px;
background: #00BFFF;
position: relative;}
.arrow:after{
content: “”;
width: 0; height: 0;
position: absolute; top: -19px; left: 100%;
border-width: 40px 0 40px 80px;
border-style: solid;
border-color: transparent #00BFFF;}
Draw a heart in CSS
In the HTML file I give the name div class – “heart”, and in the CSS file I write the following:
.heart {
position: relative;
width: 100px;
height: 80px;}
.heart:before, .heart:after {
content: “”;
position: absolute;
left: 100px;
top: 0;
width: 100px;
height: 160px;
background: #C71585;
border-radius: 50px 50px 0 0;
transform: rotate(-45deg); transform-origin: 0 100%;}
.heart:after {
left: 0;
transform: rotate(45deg); transform-origin: 100% 100%;}
Draw a cross in CSS
In the HTML file I give the name div class – “cross”, and in the CSS file I write the following:
.cross {
background: #f562b9;
height: 150px;
width: 50px;
position: relative;
left: 50px;}
.cross:after {
content: “”;
height: 50px;
width: 150px;
background: #f562b9;
position: absolute;
left: -50px;
top: 50px;}
There are still other examples of drawing in CSS, but I’m stopping here. Next time I’ll try something unusual. I’ll study CSS codes better and tell you about it. Thank you for your time. If you have something to say, write a comment.