Small knowledge, big challenge! This article is participating in the creation activity of “Essential Tips for Programmers”.
Last time the article mentioned CSS to achieve parallelogram box, so this time gathered some basic and common shapes to use CSS to achieve: triangle, trapezoid, fan, five-pointed star, heart. There are a lot of ways to achieve, here will not be introduced one by one, just use the more common way to let you understand the idea.
triangle
Let’s start with the simplest one, the triangle. The idea is also very simple, is to define a box, with ** “border” ** occupy the entire box, hide the unnecessary border.
You can imagine that the border definition fills the box. Box-sizing: border-box; (You can also set the width and height to 0 without writing this property). Finally, set the rest of the box to transparent.
div {
width: 150px;
height: 150px;
box-sizing: border-box;
border-top: 75px solid transparent;
border-right: 75px solid red;
border-bottom: 75px solid transparent;
border-left: 75px solid transparent;
}
Copy the code
You can actually do one more drop optimization, and look at this triangle up here. There’s actually an extra edge that doesn’t work. That’s the opposite side of the triangle we need. It’s nice to get rid of it.
div {
width: 150px;
height: 150px;
box-sizing: border-box;
border-top: 150px solid transparent;
/* border-right: 75px solid transparent; */
border-bottom: 150px solid transparent;
border-left: 150px solid red;
}
Copy the code
trapezoidal
If you’ve done triangles, trapezoids are actually pretty easy to get. Remove the box – sizing: border – box; Properties are where the clues come in.
Hide the other edges as well as the implementation triangle
div {
width: 50px;
height: 50px;
/* box-sizing: border-box; */
border-top: 75px solid transparent;
border-right: 75px solid transparent;
border-bottom: 75px solid transparent;
border-left: 75px solid red;
}
Copy the codeOptimization is the same as a triangle by removing the opposite side.
The fan
The difficulty began to upgrade. I had never met the implementation of sector before, and I just knew it by looking up some information temporarily. Knowledge grows knowledge
Refer to Zhang Xinxu’s article “3 kinds of pure CSS to achieve hollow 12 color rainbow gradient ring method”. Recommend everyone to see the big guy’s implementation, not here to show shame.
Post a big guy’s picture:
The main idea is to “cover up the unwanted parts or rotate, scale, or deform the box to make the shape appear” ** All the weird shapes are realized this way, not just the fan.
There is also a special way to achieve it through THE CSS function: Conic-gradient. I have not operated the specific one, so you can try to achieve it. You get a new skill
pentagram
What can a pentagram be decomposed into? The first thing you might think of is an inverted pentagon plus five triangles, which is hard to do with CSS. Boxes can be stacked together, and then look at the pentacle, can be regarded as ** “three triangles rotated” **
.first,.second,.three { width: 0; height: 0; position: absolute; Border - left: 86.6 px solid transparent; Border - right: 86.6 px solid transparent; } .first { border-top: 50px solid red; /* transform: rotate(120deg); */ } .second { border-top: 50px solid yellow; transform: rotate(73deg); } .three { border-top: 50px solid blue; transform: rotate(148deg); }Copy the code
love
How can love be realized? That’s a bad paw. The difficulty is what to break it down into, and it’s not angular, so it’s hard to observe.
I came across an article and it clicked. In fact, like the five-pointed star, it is also necessary to find out what pattern to decompose into. Borrow the picture from that article:
I’ll leave that up to you to try and implement.
Reference article: Love: “Pure CSS for Love Graphics”
Pentagram: “CSS implementation pentagram”
Trapezoid: “CSS Trapezoid, triangle implementation principle”
Sector: “3 pure CSS methods for hollow 12-color rainbow gradient ring”
