如何使用纯CSS（无图像）创建此不规则形状的边框？

12

我试图避免使用背景图像（或任何基于图像的解决方案）来有效地创建此图像：

不规则边框

注意：红色箭头仅指向相关边界。箭头不应包含在您的答案中。

如何使用纯CSS（无图像）创建此不规则形状的边框？如果图像不可避免，那么最简洁，最易读的答案将被接受并接受。

css borders

— 米卡·波伦（Micah Bolen）
source

12

您可以使用CSS（请注意，这不适用于旧版本的IE）。

例如，您可以组合一些形状，例如矩形和两个三角形。看到这个jsfiddle。

在此处输入图片说明

HTML：

<div id="square"></div>
<div class="align">
    <div id="triangle-topleft"></div>
    <div id="triangle-topright"></div>
</div>

和CSS：

#triangle-topright {
    width: 0;
    height: 0;
    border-top: 40px solid red;
    border-left: 100px solid transparent;
}

#triangle-topleft {
    width: 0;
    height: 0;
    border-top: 40px solid red;
    border-right: 100px solid transparent;
}

#square {
    background-color:red;
    clear:both;
    height:60px;
    width:200px;
}

.align div {
    float: left;
}

您可以在此处看到各种CSS形状。大多数（如果不是全部）都需要一个以上的div，因此面临的挑战是应用深色边框。

— 伊塞拉
source

在多边形使用基于百分比的宽度的情况下，有没有办法做到这一点？

— 米卡·波伦

使用Yisela的方法，您可以使一个div成为三角形（左边框和右边框的宽度为正方形宽度的1/2；边框的顶部=所需的高度；并在（-1 *边框的顶部）添加一个边距顶部–您需要在正方形上添加填充值，以防止文本重叠三角形

— horatio

2

您可以将这些其他形状放入伪元素中:before，:after以保持html“干净”。该:before会是左三角形，在:after正确的。

— 文森特

7

Yisela的回答很可靠，但我想我会提供这种选择：使用带有CSS形状和剪切路径的多边形或图像URI。这是一个快速教程。

请注意，与三角形边框技巧相比，此方法在更少的浏览器中可以使用。但是，如果您想使用更复杂的形状或将文本换成该形状，这将是您的最佳选择。

演示截图

— 乔伊·科德斯（Joey Cordes）
source

如果我需要多边形使用基于百分比的宽度，此解决方案甚至可以使用。也许是通过CSS vw单元实现的。这听起来可能吗？

— 米卡·波伦

2

对此也可能具有有限支持的另一种方法是“在CSS中嵌入SVG”。我自己还没有尝试过，但想法是您在对象的css声明中提供图像资源作为url，然后将包含数据的正确转义的url传递给它。

SVG是纯文本/ xml格式。一个示例多边形（来自w3schools）：

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <polygon points="200,10 250,190 160,210"
  style="fill:lime;stroke:purple;stroke-width:1"/>
</svg>

内联（嵌入式）SVG（简化）的示例（来自stackoverflow）：

url("data:image/svg+xml;utf8, <svg></svg>");

请注意，对于内联使用，必须正确地“转义” SVG数据，这使其与仅链接SVG文件相比没有那么吸引人。

在上面的链接线程中有一些关于该方法可行性的讨论。我认为，只要有支持，就可以轻松地嵌入一个白色填充的三角形这样的简单内容。复杂的SVG格式数据应存储为SVG文件而不是内联。

SVG文件是矢量文件，可以按百分比缩放，这与“边界”方法不同。它们（当前）也比列出的剪切路径方法具有更好的支持（至少是非内联）。SVG是纯文本，甚至可以使用PHP或其他服务器端脚本即时发送。

— 钟表
source

0

如果图像上的蓝色区域是透明的png，而白色区域是透明的，则需要包含此html使其成为阴影：

<svg height="0" xmlns="http://www.w3.org/2000/svg">
    <filter id="drop-shadow">
        <feGaussianBlur in="SourceAlpha" stdDeviation="4"/>
        <feOffset dx="12" dy="12" result="offsetblur"/>
        <feFlood flood-color="rgba(0,0,0,0.5)"/>
        <feComposite in2="offsetblur" operator="in"/>
        <feMerge>
            <feMergeNode/>
            <feMergeNode in="SourceGraphic"/>
        </feMerge>
    </filter>
</svg>

并在图像上使用此CSS：

.shadowed {
    -webkit-filter: drop-shadow(12px 12px 25px rgba(0,0,0,0.5));
    filter: url(#drop-shadow);
    -ms-filter: "progid:DXImageTransform.Microsoft.Dropshadow(OffX=12, OffY=12, Color='#444')";
    filter: "progid:DXImageTransform.Microsoft.Dropshadow(OffX=12, OffY=12, Color='#444')";
}

这是完美的跨浏览器解决方案。

— Bogatyrjov
source