How to create div with irregular shape

问题

I just want to ask if it is possible to create a div with irregular shape with CSS. I already searched but I can't find a good example. The style is something like this: (sorry cant upload image yet).

              /
             /                     \
            /                       \
           /                         \
          /___________________________\

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

It would be really helpful with sample codes.

回答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.

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.

HTML

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

CSS

.wrapper {
    width: 100px;
    height: 100px;
    margin-left: 100px;
    -webkit-perspective: 150px; /* Chrome, Safari, Opera  */
    perspective: 150px;
}

.test {
    height: 100px;
    width: 100px;
    background: red;
    -webkit-transform: rotateX(45deg);
    /* Chrome, Safari, Opera  */
    transform: rotateX(45deg);
}

Result

JSFIDDLE

回答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(http://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

回答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/

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

来源：https://stackoverflow.com/questions/31987090/how-to-create-div-with-irregular-shape

标签

html

css

css-shapes