如何创建不规则形状的div？

Question

是否可以用CSS创建一个形状不规则的div？我已经搜索过，但找不到很好的例子。样式是这样的：

              /
             /                     \
            /                       \
           /                         \
          /___________________________\

上面应该有一条线连接它。基本上它的左右两侧高度不同。

Answer 1

SVG 方式

由于仅CSS无法实现您要求的形状，建议您使用SVG绘制形状。

以下代码将创建以下形状：

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

SVG 是一种强大的工具，可以在不使用图像的情况下制作不可能的形状。仔细阅读 here。

HTML & CSS 回答

这可以通过使用 perspective 和 transform 来完成。您创建了两个 div：一个将获得 perspective，一个将被转换。只要知道 .test-div 中的任何内容也会被转换，所以如果您将文本放在那里，它也会被转换。

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

结果

JSFIDDLE

Answer 2

沿着它找到钻石，然后绕着它旋转，你就会得到你的形状：

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

Answer 3

这也可以使用 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>

如果需要图像，您可以只更改背景元素。

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>

在当前状态下，剪辑路径不像内联或导入的 SVG 那样得到广泛支持，但更简洁，在某些情况下更易于使用。

Browser Support

Answer 4

您可以尝试使用 overflow hidden 和 transforms，但最好的方法是 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/

如何创建不规则形状的div？

How to create a div with an irregular shape?

html

css

css-shapes