Draw Angular Side/Parallelogram Using CSS

draw angular side / parallelogram using CSS

How about using CSS3 transform skew?

Demo

.shape { 
    width: 200px; 
    height: 50px; 
    -webkit-transform: skew(30deg); 
    -moz-transform: skew(30deg); 
    transform: skew(30deg);
    background: #000;
    margin: 20px;
}

Nothing much to explain here, it's a simple div element, which I've skewed by 30deg which will result in the shape you expected.

Note: It's a CSS3 property, so older browsers, as well as IE will spoil your things, make sure you use CSS3 Pie.

Other way to achieve this is by using :after and :before pseudo and CSS Triangles along with content property.

Demo 2 (Kept red triangles for demo purpose)

Demo 3 (Color Changed)

Demo 4 (As you commented, you need to use top: 0; for :before and :after pseudo as well, because when you add text, it will shift both the triangles from the top. So inorder to prevent that, use top: 0;)

Here, am using a simple div element and placing 2 CSS triangles which are positioned absolute to the container. This is more compatible than above, if you are going for a NON CSS3 solution, you can choose this. Make sure you use display: block; for :before as well as :after. And ofcourse you can merge the common styles but I've kept both separate, so that you can get easability to customize them separately.

 .shape { 
    width: 200px; 
    height: 50px; 
    background: #000;
    margin: 50px;
    position: relative;
}

.shape:before {
    display: block;
    content: "";
    height: 0;
    width: 0;
    border: 25px solid #f00;
    border-bottom: 25px solid transparent;
    border-left: 25px solid transparent;
    position: absolute;
    left: -50px;
}

.shape:after {
    display: block;
    content: "";
    height: 0;
    width: 0;
    border: 25px solid #f00;
    border-top: 25px solid transparent;
    border-right: 25px solid transparent;
    position: absolute;
    right: -50px;
}

How can I make a similar shape to a parallelogram in css?

You could try using a border-left with transparent as the color and abandon the *-transform's altogether. This would require a CSS change but no additional HTML markup:

Current Angle:

#parallelogram {    width: 250px;    height: 0;    border-bottom: 100px solid red;    border-left: 30px solid transparent;    margin-left: 10px;}

<div id="parallelogram"></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>

CSS Parallelogram on one side with image inside

Instead of skewing the logo at all, just save your image on the white background color and use an ::after (or ::before if you prefer) to draw the angle on the right side.

http://jsfiddle.net/bc2mcpst/

Rectangle with two cut edges

You can do it using pseudo-elements like below. The approach is to cut out a triangle shape from the left-bottom and top-right of the box. This method can be used with either a solid color an image inside the shape as long as the body background is a solid color. When the body background is a non-solid color this approach will not work because the border hack needs a solid color background.

The advantage of this method is that it can support cuts of different angles at each side (like in the question where the hypotenuse of the triangular cut on either side are not parallel to each other).

div {  background: red;  width: 200px;  height: 100px;  position: relative;}div:before {  position: absolute;  height: 0;  width: 0;  content: ' ';  border: 20px solid white;  border-color: transparent transparent white white;  border-width: 20px 0px 0px 15px;  left: 0;  top: 80px;}div:after {  position: absolute;  height: 0;  width: 0;  content: ' ';  border: 20px solid white;  border-color: white white transparent transparent;  left: 170px;  top: 0px;}.with-img {  background: url(http://lorempixel.com/100/100);}

<div></div><br><div class="with-img"></div>

is it possible to create a background like this using css3?

Thanks everyone, I see there are many different ways to achieve the same result, However as I needed to have this pattern as a background for my menu, I ended up using the bellow style:

.navbar {
background: linear-gradient(45deg, white 25%, 
    rgba(140, 25, 29, 1) 25%);
    background-size: 100% 100%;
    background-repeat: no-repeat;
height: 90px;   
 }

Draw Angular Side/Parallelogram Using CSS