Shapes – CSS challenges

This content originally appeared on DEV Community and was authored by Mitchell

You can find all the code in this post at the repo Github.

You can check the visual here CodeSandbox.

Draw all kinds of shapes via CSS

How do you draw square、trapezoidal、triangle、ano-triangle、sector、circle、half-circle、fixed-width-height-ratio、0.5px line in CSS?

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Shapes</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <div class="square"></div>

    <div class="trapezoidal"></div>

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

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

    <div class="sector"></div>

    <div class="circle"></div>

    <div class="half-circle"></div>

    <div class="fixed-width-height-ratio"></div>

    <div class="half-one-px-line">0.5px line</div>
  </body>
</html>

.square {
  width: 100px;
  height: 100px;
  border-top: 50px solid red;
  border-bottom: 50px solid blue;
  border-right: 50px solid green;
  border-left: 50px solid orange;
}

.trapezoidal {
  width: 100px;
  height: 100px;
  border: 50px solid transparent;
  border-bottom-color: tomato;
}

.triangle {
  width: 0;
  height: 0;
  border: 50px solid transparent;
  border-bottom-color: tomato;
}

.sector {
  width: 0;
  height: 0;
  border: 50px solid transparent;
  border-bottom-color: tomato;
  border-radius: 50%;
}

.circle {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background-color: tomato;
}

.half-circle {
  width: 100px;
  height: 50px;
  background-color: tomato;
  border-top-left-radius: 50px;
  border-top-right-radius: 50px;
}

.fixed-width-height-ratio {
  padding-top: 56.25%;
  background-color: blue;
  width: 100%;
}

.half-one-px-line {
  background-color: aqua;
  border-bottom: 1px solid black;
  transform: scaleY(0.5) scaleX(0.5);
  transform-origin: 0 0;
}

This content originally appeared on DEV Community and was authored by Mitchell

Print Share Comment Cite Upload Translate Updates

APA

Mitchell | Sciencx (2024-11-05T01:22:42+00:00) Shapes – CSS challenges. Retrieved from https://www.scien.cx/2024/11/05/shapes-css-challenges/

MLA

" » Shapes – CSS challenges." Mitchell | Sciencx - Tuesday November 5, 2024, https://www.scien.cx/2024/11/05/shapes-css-challenges/

HARVARD

Mitchell | Sciencx Tuesday November 5, 2024 » Shapes – CSS challenges., viewed ,<https://www.scien.cx/2024/11/05/shapes-css-challenges/>

VANCOUVER

Mitchell | Sciencx - » Shapes – CSS challenges. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2024/11/05/shapes-css-challenges/

CHICAGO

" » Shapes – CSS challenges." Mitchell | Sciencx - Accessed . https://www.scien.cx/2024/11/05/shapes-css-challenges/

IEEE

" » Shapes – CSS challenges." Mitchell | Sciencx [Online]. Available: https://www.scien.cx/2024/11/05/shapes-css-challenges/. [Accessed: ]

rf:citation

» Shapes – CSS challenges | Mitchell | Sciencx | https://www.scien.cx/2024/11/05/shapes-css-challenges/ |

Please log in to upload a file.

There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.

Draw all kinds of shapes via CSS

Related Posts