How to make a Parallelogram in CSS/HTML - Tutorial
Hello and Welcome to another HTML/CSS Tutorial! In today's tutorial, I will teach you how to make a parallelogram(polygon) in CSS or HTML. You might have seen the about page of twitter, which has parallelograms as links to different pages! With that being said, let's start replicating the exact same thing in the tutorial.
OUTPUT of the CODE:
CSS Code:
The following is the main 'CSS' code that you need to put into the style-sheet or the <STYLE> tag:
.parallelogram {
height: 50px;
width: 100px;
background: #0000FF;
-webkit-transform: skew(20deg);
-moz-transform: skew(20deg);
-o-transform: skew(20deg);
}
HTML Code:
The following is the 'HTML' code that you need to put into the <BODY> tag:
<div class="parallelogram"> </div>
If there is any problem in the article, you can report it in the comments section below and for more such articles, you can check out our HomePage and if you want to get notified about future uploads, Subscribe to our Newsletter!
No comments:
You are welcome to share your ideas with us in comments!