Border for css shapes

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

---

Your solution (positioning a background div) is about the most workable way you are going to get in CSS because the shapes are not recognized by the browser as shapes.

You can take a square, make copies and rotate them to make a point burst, and it looks like a point burst but as far as the browser is concerned, you have 3 squares, not a point burst, and if you put a border, the borders will be around each square.

You could make small rectangles, rotate them and position them on the edges of your "shape" to create a "border", so yes, it's doable, but for all practical purposes, it's insane.

If you need to draw shapes on the fly, have a look at HTML5 canvas Intro to canvas drawing.

---

SVG is now a valid option as well since all recent browsers support it.

---

I don't think it's possible, because what you're doing relies on the fact that the shapes are made from borders.

You can't add borders to what is already a border.

But like you showed in your fiddle, you can emulate another border by having a background shape.

---

正如上面所说的那样.... CSS形状是用坚实的边界和那些走到一起的角度制作的，所以你不能改变边框样式，或者你不会产生你想要的形状

链接地址: http://www.djcxy.com/p/16708.html

上一篇: MySQL慢速大查询

下一篇: 边框为CSS形状