Drawing in CSS – my first steps and experience

Last Updated on

Drawing in CSSHello, 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
Creating CSS and HTML files
Creating CSS and HTML files

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:

Linking css and html files
Linking css and html files

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>:

Between the body tag will be the picture settings
Between the body tag will be the picture settings

Draw a circle in CSS

For example, to draw a black circle the size:

  • width: 200px;
  • height: 200px;
Draw a circle in CSS
Circle

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.

Draw a circle in CSS
Draw a circle in CSS

.circle {

width: 200px;

height: 200px;

background: #000000;

border-radius: 50%;}

To draw another shape, you need:

  1. Change the name of the <div class> in the HTML file;
  2. Title the same name settings in the CSS file;
  3. 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 an ellipse in CSS
Ellipse
Draw an ellipse in CSS
Draw an ellipse in CSS

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 square in CSS
Square
Draw a square in CSS
Draw a square in CSS

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 up in CSS
Triangle with a cone up
Draw a triangle with a cone up in CSS
Draw a triangle with a cone up in CSS

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 a triangle with a cone down in CSS
Triangle with a cone down

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 an arrow in CSS
Arrow in CSS
Draw an arrow in CSS
Draw an arrow in CSS

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 heart in CSS
Heart
Draw a heart in CSS
Draw a heart in CSS

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;}

Draw a cross in CSS
Cross
Draw a cross in CSS
Draw a cross in CSS

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.

Leave a Reply

Your email address will not be published. Required fields are marked *