How to create some common CSS3 irregular shapes

CSS3 Irregular graphic design is becoming more and more popular in modern web page design. Making irregular designs has become increasingly easy and can be achieved without using JavaScript or back-end scripts. This implementation is called CSS3 irregularity.

The advantage of CSS3 Irregular is its flexibility and responsiveness. We can create perfectly responsive pages for different device resolutions. In addition, a good irregular design can add some unique style to your website.

CSS3 Irregular shapes are easy to create, just cut out the desired shape and then add color around it or use a background image to make it look more attractive.

Now, let’s take a look at how to create some common CSS3 irregular shapes.

1. Triangle

Triangle is one of the most basic shapes in CSS3 irregular graphics. It can be created with the following code:

.triangle {
  width: 0;
  height: 0;
  border-top: 50px solid #007bff;
  border-left: 50px solid transparent;
}

2. Trapezoid

A trapezoid is also a simple shape, similar to a triangle. But unlike a triangle, a trapezoid has two short sides and two long sides.

.trapezoid {
  height: 0;
  width: 100px;
  border-top: 50px solid #007bff;
  border-bottom: 50px solid #007bff;
  border-left: 25px solid transparent;
  border-right: 25px solid transparent;
}

3. Parallelogram

A parallelogram is a simple irregular shape that can be created with the following code:

.parallelogram {
  width: 150px;
  height: 100px;
  transform: skew(20deg);
  background-color: #007bff;
}

4. Oval

Oval is another CSS3 irregular shape that can be created with the following code:

.ellipse {
  width: 100px;
  height: 50px;
  border-radius: 50%;
  background-color: #007bff;
}

5. Polygon

We can use the following The code to create a five-pointed star:

.star {
  height: 0;
  width: 0;
  border-right: 50px solid transparent;
  border-bottom: 50px solid #007bff;
  border-left: 50px solid transparent;
  transform: rotate(35deg);
}

.star:before {
  height: 0;
  width: 0;
  margin: -50px 0 0 -25px;
  content: "";
  position: absolute;
  border-right: 25px solid transparent;
  border-bottom: 30px solid #fff;
  border-left: 25px solid transparent;
  transform: rotate(-35deg);
}

.star:after {
  width: 0;
  height: 0;
  margin: -20px 0 0 -10px;
  content: "";
  position: absolute;
  border-right: 10px solid transparent;
  border-bottom: 12px solid #007bff;
  border-left: 10px solid transparent;
  transform: rotate(35deg);
}

Summary

CSS3 Irregular graphic design is not difficult. With the right tools and some basic knowledge, it's easy to create simple shapes. In web page design, irregular graphic design can add some unique style to the page, thereby bringing a better user experience to our website.

The above is the detailed content of How to create some common CSS3 irregular shapes. For more information, please follow other related articles on the PHP Chinese website!