Is it possible to express a trapezoid only with CSS?

CSS can be used not only to decorate text and images, but also to draw shapes.

Using an image file is quicker, but if you draw shapes with CSS, the file will be lighter and the website will be displayed faster.

Circles, triangles, and parentheses can be reproduced to some extent by skillfully using CSS properties.

In this article, we introduce how to reproduce how to make a trapezoid among shapes with CSS. .

This article is useful when you want to create a trapezoidal background or image, so try making various shapes using this article as a reference.

There are two ways to make a trapezoid in CSS

There are two ways to create a trapezoid in CSS.

We will explain how to use the familiar border property and how to use the special clip-path property.

Choose a method that is easy to describe and actually type in the code.

Create a trapezoid using the border property

The easiest way to draw a trapezoid in CSS is by using the border property.

Let’s start with a simple code example.

HTML
<div class="daikei"></div>

CSS
.daikei{
width: 100px;
box-sizing: border-box;
border-bottom: 60px solid #34a743;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
}

This is a method to create a trapezoid using the border line width for an empty div.

By creating a height with border-bottom and specifying it as transparent, which means that the colors of the left and right borders are transparent , the left and right tilts are reproduced.

You can adjust the height by changing the width of the border-bottom, and change the angle of inclination by changing the left and right widths.

It’s easy to create a trapezoid with the border property, but you can’t create a trapezoid using an image, so it’s effective when you want to create a simple trapezoid.

Create a trapezoid using the clip-path property

The clip-path property of CSS can be decorated like clipping the background.

To create a trapezoid with the clip-path property, use the clip-path property polygon .

First, let me show you the code.

HTML
<div class="daikei2"></div>

CSS
.daikei2 {
width: 150px;
height: 100px;
background-color: greenyellow;
clip-path: polygon(0% 100%, 20% 0%, 80% 0%, 100% 100%);
}

The value of clip-path:polygon() is given in percent, assuming the upper left coordinate is (0,0).

Values ​​in a polygon are written in the order left to bottom left, top left, top right, bottom right .

A convenient way to use clip-path:polygon() is to clip it to a trapezoid even when using an image as the background.

Crop the background image into a trapezoid

I will show you how to cut the background image into a trapezoid.

A simple code is presented below.

HTML
<div class="daikei2"></div>

CSS
.daikei2 {
width: 150px;
height: 100px;
background-image: url(computer.jpg);
background-size: cover;
clip-path: polygon(0% 100%, 20% 0%, 80% 0%, 100% 100%);
}

Just replace the background color with your image .

When you want to freely cut and display an image, you can easily reproduce the design as you think by effectively using clip-path.

summary

If you can make good use of CSS properties, you can create shapes such as trapezoids as well as text and color decorations.

To create a trapezoid in CSS, use the border property or clip-path property.

Use the border property if you want to create a simple trapezoid, and use the clip-path property if you want to cut out a background such as a photo into a trapezoid .

CSS can create not only trapezoids, but also circles, triangles, and polygons, so let’s learn by actually typing the code.

If you don’t know how to study programming or don’t know what to study, please come to DMMWebCamp for a free consultation. Let’s talk about future career development.