☜ ☞

2D

To draw 2D shapes in HTML and CSS, you can use the div element and apply styles to it using CSS.

Here is an example of how to draw a square using HTML and CSS:

<div style="width: 100px; height: 100px; background-color: red;"></div>

This will create a div element with a width of 100 pixels and a height of 100 pixels, and apply a red background color to it. This will create a red square on the web page.

You can also use CSS properties such as border-radius to create rounded corners on the square:

<div style="width: 100px; height: 100px; background-color: red; border-radius: 20px;"></div>

To draw other shapes, you can use the border property to create the desired shape. For example, to draw a triangle, you can use the following CSS:

.triangle {  width: 0;  height: 0;  border-left: 50px solid transparent;  border-right: 50px solid transparent;  border-bottom: 100px solid red; }

Then, you can apply this class to a div element in your HTML:

<div class="triangle"></div>

This will create a red triangle on the web page.

You can also use the clip-path property to create more complex shapes. For example, to create a star shape, you can use the following CSS:

.star {  width: 200px;  height: 200px;  background-color: yellow;  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); }

Then, you can apply this class to a div element in your HTML:

<div class="star"></div>

This will create a yellow star on the web page.<!DOCTYPE html>

Complete code
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>2D shapes</title>
  <style>
    .triangle {
      width: 0;
      height: 0;
      border-left: 50px solid transparent;
      border-right: 50px solid transparent;
      border-bottom: 100px solid red;
    }

    .star {
      width: 200px;
      height: 200px;
      background-color: yellow;
      clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
    }

  </style>
</head>
<body>
<div style="width: 100px; height: 100px; background-color: red;"></div>
<br>
<div style="width: 100px; height: 100px; background-color: red; border-radius: 20px;"></div>
<br>
<div class="triangle"></div>
<br>
<div class="star"></div>
</body>
</html>

☜ ☞