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

问题描述

是否可以用CSS创建一个不规则形状的div?我已经搜索过，但我找不到一个很好的例子.风格是这样的:

<代码>//\/\/\/___________________________\

顶部应该有一条线连接它.基本上左右两边的高度不同.

解决方案

SVG 方式

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

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

SVG 是一种强大的工具，可以在不使用图像的情况下制作原本不可能的形状.在

JSFIDDLE

Is it possible to create a div with an irregular shape with CSS? I already searched but I can't find a good example. The style is something like this:

              /
             /                     \
            /                       \
           /                         \
          /___________________________\    

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

解决方案

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.

---

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

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

Result

JSFIDDLE

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