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

Question

我为用户提供了这个画笔功能，可以用他们选择的颜色在不同的铝件上绘制(paint)。如果您在下面的快照中注意到 Angular 落看起来是斜接的，或者它们看起来好像是 45 度 Angular 。

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

我将在这个程序的第二阶段开始使用 Canvas ，所以它很重要，但现在能够将 Angular 落摆正会很好。

有什么建议吗？

Answer 1

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

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

你可以在这里看到一个有效的例子

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有 child <div>用于渲染边界的边。由于它们是断开连接的元素，因此它们的边框由浏览器单独呈现。由于边框折叠，它们显示为一个边框。