How to create a div with an irregular shape? - html

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.

Answer 1

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

Answer 2

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

Answer 3

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/

Answer 4

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