How to make trapezoid with CSS?

Ethan Karla 614 15 Jul 2021

Is it possible to make a shape trapezoid? If it is possible state with the help of example.

1 Answers

Ravi Vishwakarma 15 Jul 2021

<!DOCTYPE html>

<html lang='en' xmlns='http://www.w3.org/1999/xhtml'>

<head>

    <meta charset='utf-8' />

    <style type='text/css'>

        body{

            text-align:center;

            display: flex;

            flex-direction:column;

            justify-content: center;

            align-items: center;

        }

            body div {

                margin: 50px;

            }

.trap {

            width:200px;

            height:100px;

            background-color:white;

            border-bottom:100px solid black;

            border-left:40px solid transparent;

            border-right:40px solid transparent;

        }

    </style>

    <title>Animation Demo</title>

</head>

<body>

    <div class='trap'>  </div> Trapezoid <br />

</body>

</html>

Markdown for AI

A clean, structured version of this page for AI assistants and LLMs.

Open .md

forum

How to make trapezoid with CSS?

Can you answer this question?

1 Answers