我如何顯示方形的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>，用於呈現邊界的邊。由於它們是斷開的元素，因此它們的邊框由瀏覽器分別渲染。由於邊界被摺疊，它們顯示爲一個邊界。