如何创建不规则形状的div [英] How to create div with irregular shape

问题描述

我只想问一下是否可以用CSS创建具有不规则形状的div.我已经搜索过，但是找不到一个很好的例子.样式如下:(对不起，尚无法上传图片).

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.

推荐答案

SVG方式

由于仅CSS无法提供您要求的形状，因此建议您使用SVG绘制形状.

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是一个强大的工具，可以在不使用图像的情况下使原本不可能的形状变为现实.在此处进行阅读.

SVG is a powerful tool to make shapes otherwise impossible without using images. Read up on it here.

CSS答案

这可以通过使用perspective和transform来完成.您创建两个div:一个将获取perspective，另一个将被转换.只是知道.test -div中的任何内容也会被转换，因此，如果在其中放置文本，它也会被转换.

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

结果

JSFIDDLE

JSFIDDLE

这篇关于如何创建不规则形状的div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！