CODEWITHSUNDEEP
htmlcsscss-shapes
Lenonskie
Lenonskie

Reputation: 203

How to create a div with an irregular shape?

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.

Upvotes: 14

Views: 27518

Answers (4)

Stewartside
Stewartside

Reputation: 20905

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.

Upvotes: 11

Rvervuurt
Rvervuurt

Reputation: 8963

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>

Irregular trapezoid shape

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

enter image description here

JSFIDDLE

Upvotes: 27

Max Payne
Max Payne

Reputation: 2428

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/

Upvotes: 1

Aakash Shah
Aakash Shah

Reputation: 89

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;
}

Upvotes: -2

Related Questions