How to Create Parallelogram Shape Background

How to create parallelogram shape background?

As alternative to @mmlooloo's answer, whom a credit goes to, I suggest a xml-drawable solution (since you haven't emphasized exactly what kind of solution you're looking for). In the example below I used a general View, however you can use any other.

Here is the View

android:background="@drawable/shape" />

and shape.xml itself

<?xml version="1.0" encoding="UTF-8"?>
<layer-list xmlns:android="" >

<!-- Colored rectangle-->
<shape android:shape="rectangle">
android:height="40dp" />
<solid android:color="#13a89e" />

<!-- This rectangle for the left side -->
<!-- Its color should be the same as layout's background -->
<shape android:shape="rectangle">
<solid android:color="#ffffff" />

<!-- This rectangle for the right side -->
<!-- Their color should be the same as layout's background -->
<shape android:shape="rectangle">
<solid android:color="#ffffff" />


Here is how it looks like:

Sample Image

How do I create a 'Parallelogram' shape in css with a straight side?

You can achieve this by adding a triangle shaped element and positioning it next to the rectangular element.

Option 1: (Using the border hack)

In the example below, I have added a blue color for the triangular shape only to illustrate how the shape is achieved. Please replace the color in the below line to achieve the parallelogram with a slanted edge on one side and a straight edge on the other.

Change the below

border-color: transparent blue blue transparent;


border-color: transparent red red transparent;

Note: When using this method, it is difficult to add an extra outer border to the shape.


.trapezoid{    position: relative;    height: 100px;    width: 100px;    background: red;    margin-left: 50px;    color: white;}.trapezoid:after{    position: absolute;    content: '';    left: -50px;    top: 0px;    border-style: solid;    border-color: blue transparent blue transparent;    border-width: 100px 0px 0px 50px;}
<div class="trapezoid">Some dummy text</div>

How to make a parallelogram structure with shading effect in css

CSS skew and gradient can solve this problem

#demo {  -moz-transform: skew(-22deg, 0deg);  -webkit-transform: skew(-22deg, 0deg);  -o-transform: skew(-22deg, 0deg);  -ms-transform: skew(-22deg, 0deg);  transform: skew(-22deg, 0deg);  editor/#a90329+1,  a90329+47,  aa3d48+47,  aa3d48+100 */ background: #a90329;  /* Old browsers */  background: -moz-linear-gradient(45deg, #a90329 1%, #a90329 47%, #aa3d48 47%, #aa3d48 100%);  /* FF3.6-15 */  background: -webkit-linear-gradient(45deg, #a90329 1%, #a90329 47%, #aa3d48 47%, #aa3d48 100%);  /* Chrome10-25,Safari5.1-6 */  background: linear-gradient(45deg, #a90329 1%, #a90329 47%, #aa3d48 47%, #aa3d48 100%);  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a90329', endColorstr='#aa3d48', GradientType=1);  /* IE6-9 fallback on horizontal gradient */  height: 100px;}
<div id="demo">Demo</div>

How to create parallelograms divs?

You can use the negative SkewX transform to get the desired effect:

div {  margin: 20px;  width: 200px;  height: 100px;  display: inline-block;  background: yellow;      border: 1px solid black;  transform: skewX(-10deg);  }

How to style a title with a parallelogram background?

I think this is it

Adjust it to your needs

#parallelogram {
padding: 8px;
display: inline-block;
background: darkred;
transform: skewX(-30deg);
#text {
transform: initial;
color: white;
transform: skewX(30deg);
<div id="parallelogram">
<div id="text">
Coding practice

parallelogram shape in css

body{    margin: 30px 150px;}
.nav-bg { width: 150px;/*for example*/ height: 150px;/*for example*/ background-color:rgba(2, 2, 2, 0.9); -webkit-transform: skew(-60deg); -moz-transform: skew(-60deg); -o-transform: skew(-60deg); transform: skew(-60deg); }.nav-bg ul{ color: #fff; -webkit-transform: skew(60deg); -moz-transform: skew(60deg); -o-transform: skew(60deg); transform: skew(60deg);}
<div class="nav-bg">    <ul class="nav navbar-nav">        <li>test</li>    </ul></div>

Image inside a parallelogram

There is a method in transform for skewing objects. The only thing you will have to look out for is that everything in the div will skew also. So you have to apply it twice. Once to skew the div a certain number of degrees and then again to skew the picture inside back the opposite direction.

For example if you do this to the div:
transform: skewX(10deg);

You'll have to do this to the picture:
transform: skewX(-10deg);

Here's a link to read some more about transform - because there's more then meets the eye.

Related Topics

Leave a reply