css形状的边框

我发现了css形状，我感兴趣的是有没有办法为它们制作边框（实线，虚线，虚线）（shapes）？css形状的边框

我已经做过的第一件事是制作另一个形状并将它放在z-index（http://jsfiddle.net/gYKSd/）的背景上，但它仅作为实心边框发挥作用。

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

来源

2013-10-18 Vadim Kalinin

基本上你形状的角度提出不能做到这一点，因为元素是由边界组成的......而边界不能有另一个边界。这并不是说你不能通过添加额外的元素来“伪装”，但这不是你问的。 –

CSS形状是一种破解。 CSS不是为绘制形状而设计的。当然，如果你一定要用它来做基本的三角形。其他人都会说。但不要指望它能够更进一步，因为你不能;黑客的本质是，它是一样好。如果你想要的东西比这更多，使用浏览器的适当的图形工具，如SVG。 – Spudley

@Paulie_D对不起，我不清楚。但我的意思是伎俩来解决这个任务。 –

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

你可以做一个方块，制作副本并旋转它们以形成一个点爆发，它看起来像一个点爆发，但就浏览器而言，你有3个正方形，而不是一个点爆发，如果你放一个边界，边界将在每个方格周围。

您可以制作小矩形，旋转它们并将它们放置在“形状”的边缘以创建“边框”，所以是的，它是可行的，但对于所有实际用途而言，它是疯狂的。

如果您需要动态绘制形状，请查看HTML5画布Intro to canvas drawing。

SVG现在是一个有效选项以及since all recent browsers support it。

来源

2013-10-18 17:03:38 Sylverdrag

和SVG :)和+1 – FelipeAls

谢谢。你是对的。由于浏览器的支持不佳，我放弃了svg，但看起来这已经不是近期浏览器的问题了。 – Sylverdrag

@Sylverdrag你知道什么是资源要求更高的画布或SVG。因为我从来没有使用过SVG，但我曾经用过画布，而且看起来并不像快。 –

我不认为这是可能的，因为你在做什么依赖于一个事实，即形状在边境制造。

您不能添加边界到已经是边界的边界。

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

来源

2013-10-18 16:07:18 Overcode

作为几个上面说的.... CSS形状与固体边界和那些撞在了一起，所以你不能改变边框样式，或者您会不会产生你想要

来源

2013-10-18 17:12:54 dougmays

css形状的边框

回答

相关问题