CSS for a Trapezoid/Trapezium

<!DOCTYPE html>
<html>
<head>
     <style>
             .my-trapezoid {
                            border-bottom: solid 200px darkgreen;
                            border-left: solid 115px transparent;
                            border-right: solid 115px transparent;
                            width: 333px;
                            position: relative;
                           }
                       p {
                           position: absolute;
                           left: 50%;
                           color: yellow;
                           font-size: 15pt;
                           transform: translate(-50%, 300%)
                          }
     </style>
</head>
<body>

<center>
<div class="my-trapezoid">
<p>This is a trapezoid</p>
</div>
</center>

</body>
</html>

BREAKING NEWS

Main Menu

Saturday, May 22, 2021

CSS for a Trapezoid/Trapezium

No comments

Post a Comment

Pages

Instagram accessToken

BREAKING NEWS

Main Menu

Saturday, May 22, 2021

CSS for a Trapezoid/Trapezium

You Might Also Like

No comments

Post a Comment

Pages

Instagram accessToken