javascript - 如何在没有斜角外观的情况下显示方形 div

Question

我有这个油漆刷功能，用户可以用他们选择的颜色来绘制不同的铝片。如果您在快照中注意到角落下方看起来是斜接的，或者它们看起来好像变成了 45 度角。

有没有办法让所有的角落看起来都是方形的而不是斜接的？

我将在该程序的第二阶段开始使用画布，所以它很重要，但现在能够使角落变直会很好。

有什么建议么？

Answer 1

折叠的 CSS 边框由浏览器使用斜接形状呈现。此功能可用于渲染三角形和箭头。只是谷歌css triangle trick的例子。

不可能为由两种不同颜色组成的边框创建尖角。解决方案是使用两个嵌套元素来渲染边框的不同部分。

你可以在这里看到一个工作示例

http://jsfiddle.net/thinkingmedia/xApHM/

它是这样工作的：

<div class="row after">
    <div class="target"><div></div></div>
    <div class="target selected"><div></div></div>
    <div class="target"><div></div></div>
</div>

.target顶部/底部有边框，但两侧没有边框。每个.target都有一个孩子<div>，用于渲染边界的侧面。由于它们是不连贯的元素，它们的边框由浏览器单独呈现。由于边框是折叠的，因此它们显示为一个边框。