7

I have discovered css shapes and I'm interested is there a way to make border (solid, dotted, dashed) for them (shapes)?

The first thing that I've though about was to made another shape and put it on the background by z-index (http://jsfiddle.net/gYKSd/), but it makes an effect only as solid border.

HTML:

<div class="triangle"></div>
<div class="background"></div>

CSS:

     .triangle {
        position: absolute;
        top: 14px;
        left: 10px;
        height: 0px;
        width: 0px;
        border-right: 50px solid transparent;
        border-left: 50px solid transparent;
        border-bottom: 100px solid red;
        z-index: 0;
}
      .background {
        position: absolute;
        top: 0;
        left: 0;
        height: 0px;
        width: 0px;
        border-right: 60px dotted transparent;
        border-left: 60px dotted transparent;
        border-bottom: 120px dotted gray;
        z-index: -1;
    }
4

3 回答 3

4

您的解决方案（定位背景 div）是您将在 CSS 中获得的最可行的方式，因为浏览器不会将形状识别为形状。

您可以取一个正方形，复制并旋转它们以制作一个点突发，它看起来像一个点突发，但就浏览器而言，您有 3 个正方形，而不是一个点突发，如果你放一个边框，边界将围绕每个正方形。

您可以制作小矩形，旋转它们并将它们放置在“形状”的边缘以创建“边框”，所以是的，这是可行的，但出于所有实际目的，这太疯狂了。

如果您需要即时绘制形状，请查看 HTML5 canvas Intro to canvas drawing。

SVG 现在也是一个有效的选项，因为所有最近的浏览器都支持它。

于 2013-10-18T17:03:38.057 回答
0

正如上面的一些人所说....CSS 形状是由实心边框和它们的角度组成的，所以你不能改变边框样式或者你不会产生你想要的形状

于 2013-10-18T17:12:54.503 回答
0

我认为这是不可能的，因为你所做的依赖于形状是由边界构成的事实。

您不能为已经是边框的内容添加边框。

但是就像您在小提琴中展示的那样，您可以通过具有背景形状来模拟另一个边框。

于 2013-10-18T16:07:18.560 回答