How to make Parallelogram, Oval, Tringle with CSS?

Ethan Karla 615 15 Jul 2021

Is it possible to make this shapes? if it is possible state with the help of example.

Ethan Karla

Student

An enthusiastic, adaptive, and fast-learning person with a broad and acute interest in the discovery of new innovative drugs, I particularly enjoy collaborating with scientists from different disciplines to develop new skills and solve new challenges.

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;

            }

        .parlogram {

            width: 200px;

            height: 100px;

            transform:skew(20deg);

            background-color:red;

        }

      

    </style>

    <title>Animation Demo</title>

</head>

<body>

    <div class='parlogram'>  </div> Parallelogram <br />

</body>

</html>

<!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;

            }

        .oval {

            width: 200px;

            height: 100px;

            border-radius: 50%;

            background-color: red;

        }

       

    </style>

    <title>Animation Demo</title>

</head>

<body>

    <div class='oval'>  </div> Oval <br />

</body>

</html>

<!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;

            }

        .tringle {

            width:0px;

            height:0px;

            border-left:50px solid transparent ;

            border-right:50px solid transparent;

            border-bottom:100px solid red;

        }

    </style>

    <title>Animation Demo</title>

</head>

<body>

    <div class='tringle'>  </div> Tringle <br />

</body>

</html>

forum

How to make Parallelogram, Oval, Tringle with CSS?

Can you answer this question?

1 Answers