css - 如何整理CSS形状？

Question

请检查这个 jsfiddle

http://jsfiddle.net/rr4GH/1/

如您所见，它是一个带有两个三 Angular 形的圆边框，但中间分隔两个三 Angular 形的线并不直。怎么才能做到这么直呢？

另外右上角好像有点不确定是什么颜色，怎么排序？

html:

<div class="css-arrow-multicolor"></div>

CSS:

.css-arrow-multicolor {
    -moz-border-radius: 6px;
    border-radius: 6px;
    border-color: blue #ECB603 #ECB603 blue;
    border-style:solid;
    border-width:15px;
    width:0;
    height:0;
}

Answer 1

我看到你的问题了......就在中间，它偏离了一个像素，对吧？

如果您在一侧使用一种颜色而在另一侧使用透明颜色，则会得到一条直线。使用其中两个来实现相同的效果。

http://jsfiddle.net/rr4GH/4/