How to create a div with an irregular shape?

Question

Is it possible to create a div with an irregular shape with CSS? I already searched but I can't find a good example. The style is something like this:

              /
             /                     \
            /                       \
           /                         \
          /___________________________\

There should be a line on the top that connects it. Basically it has different height on the left and right side.

check the following link it contains code for creating different types of shapes using css. https://css-tricks.com/examples/ShapesOfCSS/ i hope this might help you. — Zain Aftab, Aug 13 '15 at 11:44

score 27 · Accepted Answer · edited Aug 16 '21 at 13:42

THE SVG WAY

Since the shape you request is not possible with only CSS, I suggest you use SVG to draw the shape.

The following piece of code will create the below shape:

<svg height="150" width="150">
    <polygon points="20,10 100,30 120,100 0,100" style="fill:red;" />
</svg>

SVG is a powerful tool to make shapes otherwise impossible without using images. Read up on it here.

HTML & CSS Answer

This can be done by using perspective and transform. You create two divs: one that will get the perspective and one that will be transformed. Just know that anything in the .test-div will also be transformed, so if you put text in there, it will also get transformed.

.wrapper {
    width: 100px;
    height: 100px;
    margin-left: 100px;
    perspective: 150px;
}

.test {
    height: 100px;
    width: 100px;
    background: red;
    transform: rotateX(45deg);
}

<div class="wrapper">
    <div class="test"></div>
</div>

Result

JSFIDDLE

Just click on the Fiddle link in the bottom to see the code. I've added a border to the wrapper, so you can actually see the perspective: http://jsfiddle.net/a517sb5m/1/ — Rvervuurt, Aug 13 '15 at 11:47

score 10 · Answer 2 · edited Aug 16 '21 at 13:44

This can also be done using CSS clip-path

div {
  width: 200px;
  height: 150px;
  background: red;
  -webkit-clip-path: polygon(20% 10%, 85% 30%, 100% 100%, 0% 100%);
  clip-path: polygon(20% 10%, 85% 30%, 100% 100%, 0% 100%);
}

<div></div>

You can then just change the background element if you need an image.

div {
  width: 200px;
  height: 150px;
  background: url(https://lorempixel.com/200/150/);
  -webkit-clip-path: polygon(20% 10%, 85% 30%, 100% 100%, 0% 100%);
  clip-path: polygon(20% 10%, 85% 30%, 100% 100%, 0% 100%);
}

<div></div>

In their current state, clip-paths aren't as widely supported as inline or imported SVG but is a much cleaner, and in some cases, easier variant to use.

Browser Support

score 1 · Answer 3 · answered Aug 14 '15 at 05:45

You can try using overflow hidden and transforms, though the best approach will be svg.

HTML

<div class="out">
    <div class="in"></div>
</div>

CSS

body { background:url(http://www.placecage.com/g/640/480) }
.out {
    height: 100px;
    width: 150px;
    transform-origin: 0% 100%;
    transform: skew(-10deg);
    overflow: hidden;
}
.in {
    height: 110px;
    width: 148px;
    position: relative;
    left: -43px;
    top: -7px;
    transform-origin: 0% 0%;
    transform: skew(30deg) rotate(10deg);
    background: rgba(9,40,0,0.8);
    transition: 0.5s ease;
}
.in:hover {
    background: rgba(50,0,70,0.7);
    transition: 0.5s ease;
}

FIDDLE : https://jsfiddle.net/xb1jxd7g/

It would be better adding a `backface-visibility: hidden;` to the `.out` to smooth the jagged edges (or you could also add a null transform ` translateZ(0)` to the transform stack) :) — Harry, Aug 16 '15 at 14:42

score -2 · Answer 4 · answered Aug 13 '15 at 11:55

Following it for diamond and make a way around to rotate it and you'll get your shape :

#diamond-shield {
    width: 0;
    height: 0;
    border: 50px solid transparent;
    border-bottom: 20px solid red;
    position: relative;
    top: -50px;
}

#diamond-shield:after {
    content: '';
    position: absolute;
    left: -50px; top: 20px;
    width: 0;
    height: 0;
    border: 50px solid transparent;
    border-top: 70px solid red;
}

How to create a div with an irregular shape?

4 Answers4

Linked

Related