Question

我只想询问是否可以使用CSS创建具有不规则形状的div。我已经搜索过但我找不到一个很好的例子。风格是这样的:(对不起上传图像）。

              /
             /                     \
            /                       \
           /                         \
          /___________________________\

应该是顶部的一行连接它。基本上它在左侧和右侧具有不同的高度。

样本代码非常有用。

Answer 1

SVG WAY

由于您只能使用CSS请求的形状，我建议您使用SVG绘制形状。

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

perspective

SVG是一种功能强大的工具，可以在不使用图像的情况下使形状无法实现。阅读here。

CSS回答

可以使用transform和perspective来完成此操作。您创建了两个div：一个将获得.test，另一个将被转换。只要知道<div class="wrapper"> <div class="test"></div> </div> - div中的任何内容也会被转换，所以如果你把文本放在那里，它也会被转换。

<强> HTML

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

<强> CSS

g++ -I/usr/local/include/modbus `pkg-config glib-2.0 --cflags --libs` -L/usr/local/lib -lmodbus test-modbus.c -o test-modbus

<强>结果

<强> JSFIDDLE

Answer 2

这也可以使用CSS clip-path

完成

<div></div>

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>

{{1}}

在当前状态下，剪辑路径不像内联或导入的SVG那样受到广泛支持，但是更加清晰，在某些情况下，更容易使用。

Browser Support

Answer 3

您可以尝试使用溢出隐藏和转换，但最好的方法是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

跟着它钻石并绕道旋转它，你会得到你的形状：

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

如何创建不规则形状的div

4 个答案: