How to Create a Trapezium Using CSS3 Transform Perspective?

CSS3 Creation of Trapeziums

When visiting the Google mobile site, you may notice an aesthetically pleasing bar at the top of the page. This article explores how to replicate this effect using CSS3.

One potential approach is the CSS3 3D transform, offering a means to manipulate elements in three-dimensional space. However, more recent technologies provide viable alternatives.

CSS Transform Perspective

To draw a trapezium using CSS, consider utilizing the CSS Transform Perspective property. This technique involves creating a three-dimensional effect by applying perspective to an element. The following example demonstrates how to achieve this:

.trapezoid {
  width: 200px;
  height: 200px;
  background: red;
  transform: perspective(10px) rotateX(1deg);
  margin: 50px;
}

<div class="trapezoid"></div>

By incorporating the Transform Perspective property, you can rotate the trapezium along the x-axis to create a 3D effect. Adjust the perspective and rotation values to customize the shape and orientation of the trapezium as desired.

The above is the detailed content of How to Create a Trapezium Using CSS3 Transform Perspective?. For more information, please follow other related articles on the PHP Chinese website!