您可以使用 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，因此挑战将是应用较暗的边框。

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

请注意，此方法适用于目前比三角形边框技巧更少的浏览器。但是，如果您想使用更复杂的形状或将文本包装到形状中，这将是您的最佳选择。

另一种支持有限的方法是“在 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 或其他服务器端脚本即时发出。

如果图像上的蓝色区域是透明 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')";
}

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