Home >Web Front-end >CSS Tutorial >Shapes - CSS challenges
Shapes - CSS challenges
- Patricia ArquetteOriginal
- 2024-11-06 18:57:02893browse
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;
}
The above is the detailed content of Shapes - CSS challenges. For more information, please follow other related articles on the PHP Chinese website!
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn