CSS draws various shapes

instructions

Using CSS, you can draw many shapes, such as triangles, trapezoids, circles, ellipses, and so on, not just rectangles. Here’s how to implement these shapes.

In order to be easy to understand, the article is divided into basic shape and combined shape, the basic shape is relatively easy to achieve, and the use of these basic shape combination, you can achieve a slightly more complex combined shape.

The basic shape

triangle

.triangle {
    width: 0;
    height: 0;
    border: 50px solid blue;
    /* You can change the direction of the triangle */ by changing the border color
    border-color: blue transparent transparent transparent;
}
Copy the code

See the sample

trapezoidal

.trapzoid {
    width: 40px;
    height: 100px;
    border: 50px solid blue;
    border-color: transparent transparent blue transparent;
}
Copy the code

See the sample

circular

.circle{
	width:100px;
	height:100px;
	border-radius:50%;
	background:blue;
}
Copy the code

See the sample

A sphere

.sphere {
	height: 200px;
    width: 200px;
    border-radius: 50%;
    background: radial-gradient(circle at 70px 70px, #5cabff, #000);
}
Copy the code

See the sample

The ellipse

.ellipse {
    width: 200px;
    height: 100px;
    border-radius: 50%;
    background: blue;
}
Copy the code

See the sample

semicircle

.semicircle {
    width: 50px;
    height: 100px;
    /* "/" The first four values represent the horizontal radius of the fillet, and the last four values represent the vertical radius of the fillet */
    border-radius: 200% 0 0 200% / 100% 0 0 100%;

    /* has the same effect as using % */
    /* border-radius: 50px 0 0 50px; * /
    background: blue;
}
Copy the code

See the sample

The diamond

.rhombus {
    width: 200px;
    height: 200px;
    transform: rotateZ(45deg) skew(30deg, 30deg);
    background: blue;
}
Copy the code

See the sample

Combination of shape

heart

A heart is a combination of two circles and a rectangle.

.heart {
    width: 100px;
    height: 100px;
    transform: rotateZ(45deg);
    background: red;
}

.heart::after..heart::before {
    content: "";
    width: 100%;
    height: 100%;
    border-radius: 50%;
    display: block;
    background: red;
    position: absolute;
    top: -50%;
    left: 0;
}

.heart::before {
    top: 0;
    left: -50%;
}
Copy the code

See the sample

The fan

A sector is a combination of a circle and a rectangle, covering part of the circle with the rectangle to form a sector.

.sector {
    width: 142px;
    height: 142px;
    background: #fff;
    border-radius: 50%;
    background-image: linear-gradient(to right, transparent 50%, #655 0);
}

.sector::before {
    content: ' ';
    display: block;
    margin-left: 50%;
    height: 100%;
	width: 100%;
    background-color: inherit;
    transform-origin: left;
	/* Adjust Angle, change sector size */
    transform: rotate(230deg);
}
Copy the code

See the sample

pentagon

A pentagon is a combination of a triangle and a trapezoid.

.pentagonal {
    width: 100px;
    position: relative;
    border-width: 105px 50px 0;
    border-style: solid;
    border-color: blue transparent;
}

.pentagonal:before {
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    top: -185px;
    left: -50px;
    border-width: 0px 100px 80px;
    border-style: solid;
    border-color: transparent transparent blue;
}
Copy the code

See the sample

hexagon

A hexagon is a combination of two triangles and a rectangle.

.hexagon {
    width: 200px;
    height: 100px;
    background-color: blue;
    position: relative;
}

.hexagon:before {
    content: "";
    position: absolute;
    top: -60px;
    left: 0;
    width: 0;
    height: 0;
    border-left: 100px solid transparent;
    border-right: 100px solid transparent;
    border-bottom: 60px solid blue;
}

.hexagon:after {
    content: "";
    left: 0;
    width: 0;
    height: 0;
    bottom: -60px;
    position: absolute;
    border-left: 100px solid transparent;
    border-right: 100px solid transparent;
    border-top: 60px solid blue;
}
Copy the code

See the sample

cuboid

A cuboid is a combination of six rectangles.

.cuboid {
    width: 200px;
    height: 200px;
    transform-style: preserve-3d;
    transform: rotateX(-30deg) rotateY(-80deg);
}

.cuboid div {
    position: absolute;
    width: 200px;
    height: 200px;
    opacity: 0.8;
    transition:.4s;
}

.cuboid .front {
    transform: rotateY(0deg) translateZ(100px);
    background: #a3daff;
}

.cuboid .back {
    transform: translateZ(-100px) rotateY(180deg);
    background: #a3daff;
}

.cuboid .left {
    transform: rotateY(-90deg) translateZ(100px);
    background: #1ec0ff;
}

.cuboid .right {
    transform: rotateY(90deg) translateZ(100px);
    background: #1ec0ff;
}

.cuboid .top {
    transform: rotateX(90deg) translateZ(100px);
	background: #0080ff;
}

.cuboid .bottom {
    transform: rotateX(-90deg) translateZ(100px);
	background: #0080ff;
}
Copy the code

<div class="cuboid">
    <! Front of -- -- -- >
    <div class="front"></div>
    <! Behind the -- -- -- >
    <div class="back"></div>
    <! - the left - >
    <div class="left"></div>
    <! - the right - >
    <div class="right"></div>
    <! -- -- -- >
    <div class="top"></div>
    <! -- -- -- >
    <div class="bottom"></div>
</div> 
Copy the code

See the sample

The cylinder

A cylinder is a combination of an ellipse and a rounded rectangle.

.cylinder {
    position: relative;
    transform: rotateX(70deg);
}

.ellipse {
    width: 100px;
    height: 100px; 
    background: deepskyblue;
    border-radius: 50px;
}

.rectangle {
    width: 100px;
    height: 400px;
    position: absolute;
    opacity: 0.6;
    background: deepskyblue;
    top: 0;
    left: 0; 
    border-radius: 50px;
	z-index: -1;
}
Copy the code

<div class="cylinder">
    <div class="ellipse"></div>
    <div class="rectangle"></div>
</div>
Copy the code

See the sample

If you use gradient, it will look more like it.

background-image: linear-gradient(to right.rgba(255, 255, 255, 02.) 0, rgba(255, 255, 255, 08.0%),rgba(255, 255, 255, 02.) 100%);
Copy the code

See the sample

pyramid

A pyramid is a combination of four triangles and a rectangle.

.pyramid {
    width: 200px;
    height: 200px;
    transform-style: preserve-3d;
    transform: rotateX(-30deg) rotateY(-80deg);
} 
.pyramid div {
    position: absolute;
    top: -100px;
    width: 0px;
    height: 0px;
    border: 100px solid transparent;
    border-bottom-width: 200px;
    opacity: 0.8;
}

.pyramid .front {
    transform: translateZ(100px) rotateX(30deg);
    border-bottom-color: #a3daff;
    transform-origin: 0 100%;
}

.pyramid .back {
    transform: translateZ(-100px) rotateX(-30deg);
    border-bottom-color: #1ec0ff;
    transform-origin: 0 100%;
}

.pyramid .left {
    transform: translateX(-100px) rotateZ(30deg) rotateY(90deg);
    border-bottom-color: #0080ff;
    transform-origin: 50% 100%;
}

.pyramid .right {
    transform: translateX(100px) rotateZ(-30deg) rotateY(90deg);
    border-bottom-color: #03a6ff;
    transform-origin: 50% 100%;
}

.pyramid .bottom {
    transform: translateX(-100px) rotateZ(90deg) rotateY(90deg);
    background: cyan;
    width: 200px;
    height: 200px;
    border: 0;
    top: 0;
    transform-origin: 50% 100%;
}
Copy the code

<div class="pyramid">
    <! Front of -- -- -- >
    <div class="front"></div>
    <! Behind the -- -- -- >
    <div class="back"></div>
    <! - the left - >
    <div class="left"></div>
    <! - the right - >
    <div class="right"></div>

    <! -- -- -- >
    <div class="bottom"></div>
</div>
Copy the code

See the sample

conclusion

You can also use clip-path to draw various shapes.

CSS can draw things, not only these, there are many, many, not mentioned in the article, and even the article has been implemented in the shape is not only one way to achieve, interested partners can continue to explore.

The last

Here is an example of a magic array using a variety of shapes.

We can also animate the shapes in the magic array to make it more interesting.

See the sample