Предотвращение странного «удара» с помощью границ CSS

Question

Использование CSS для создания треугольников с помощью параметра 'border-width'.

<div id="my-weird-triangle"></div>
<style type="text/css">
    #my-weird-triangle{
        border-color: blue black black blue;
        border-style:solid;
        border-width:50px 50px 50px 50px;
        width:0;
        height:0;
    }
</style>

Создает вывод типа

В зависимости от ваших экранов, вы можете заметить или не заметить, но если вы приблизите центр треугольника, то появится небольшой (вероятно, 1 пиксель) «выпуклый», который делает треугольник странным

Как бы получить чистый CSS [3] прямоугольный треугольник без этого странного выпуклости в середине?

Answer 1

Если вы измените каждый цвет рамки, вы заметите, что верхний и нижний треугольники не соприкасаются.Вы можете изменить ширину до 1px, чтобы исправить это.

   #my-weird-triangle{
        border-color: blue black black blue;
        border-style:solid;
        border-width:50px 50px 50px 50px;
        width:1px;
        height:0;
    }

Answer 2

Вы можете использовать только две границы, поэтому шишка :

#my-weird-triangle2{
    border-color: blue black black blue;
    border-style:solid;
    border-width:100px 100px 0 0;
    width:0;
    height:0;
}

А вот пример: http://dabblet.com/gist/1731728