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
<View
android:layout_width="100dp"
android:layout_height="40dp"
android:layout_centerInParent="true"
android:background="@drawable/shape" />
and shape.xml
itself
<?xml version="1.0" encoding="UTF-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<!-- Colored rectangle-->
<item>
<shape android:shape="rectangle">
<size
android:width="100dp"
android:height="40dp" />
<solid android:color="#13a89e" />
</shape>
</item>
<!-- This rectangle for the left side -->
<!-- Its color should be the same as layout's background -->
<item
android:right="100dp"
android:left="-100dp"
android:top="-100dp"
android:bottom="-100dp">
<rotate
android:fromDegrees="45">
<shape android:shape="rectangle">
<solid android:color="#ffffff" />
</shape>
</rotate>
</item>
<!-- This rectangle for the right side -->
<!-- Their color should be the same as layout's background -->
<item
android:right="-100dp"
android:left="100dp"
android:top="-100dp"
android:bottom="-100dp">
<rotate
android:fromDegrees="45">
<shape android:shape="rectangle">
<solid android:color="#ffffff" />
</shape>
</rotate>
</item>
</layer-list>
Here is how it looks like:
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;
to
border-color: transparent red red transparent;
Note: When using this method, it is difficult to add an extra outer border to the shape.
Snippet:
.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); }
<div></div>
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
</div>
</div>
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
Android - Multi-Line Linear Layout
How to Change Separator Color in Navigationview
What Is the Equivalent of Actionbar in Earlier Sdk Versions
How to Send a Simple Email Programmatically? (Exists a Simple Way to Do It)
How to Draw Road Directions Between Two Geocodes in Android Google Map V2
How to Display Border to Imageview
Android E/Parcel﹕ Class Not Found When Unmarshalling (Only on Samsung Tab3)
How to Change Package Name in Android Studio
Android Circular Determinate Progressbar
Detect If an App Is Installed from Play Store
How to Change the Color of the Tabs Indicator Text in Android
Do Geofences Remain Active in Android After a Device Reboot
Android Exporting to CSV and Sending as Email Attachment
Receiver Not Registered Exception Error
Android Viewpager Get the Current View
Could Not Access the Package Manager. Is the System Running While Installing Android Application