如何创建不规则形状的div

Question

我只是想问一下是否有可能div用CSS 创建一个不规则的形状.我已经搜索过,但我找不到一个好例子.风格是这样的:(对不起上传图像).

              /
             /                     \
            /                       \
           /                         \
          /___________________________\    

这里应该是在顶部的线路连接它.基本上它在左侧和右侧具有不同的高度.

这对样本代码非常有帮助.

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是一种功能强大的工具,可以在不使用图像的情 在这里阅读它.

CSS答案

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

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

结果

的jsfiddle

Answer 2

这也可以使用 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 那样得到广泛支持，但它更简洁，在某些情况下更易于使用。

• 浏览器支持