Prévention de bump bizarre avec les bordures CSS

Question

Utilisation de CSS pour créer des triangles en utilisant le paramètre '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> 

Crée une sortie comme

En fonction de vos écrans, vous pouvez ou ne pas remarquer, mais si vous effectuez un zoom au centre du triangle il y a un petit (probablement 1px) 'bosse' qui rend le triangle regard étrange

Comment puis-je obtenir un CSS pur [3] angle droit t riangle sans cette bosse étrange au milieu?

Answer 1

Si vous changez la couleur de chaque bordure, vous remarquerez que les triangles supérieur et inférieur ne se touchent pas. Vous pouvez changer la largeur à 1px pour le corriger.

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

Answer 2

Vous ne pouvez utiliser que deux des frontières, donc il n'y aura pas une bosse :

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

Et est un exemple ici: http://dabblet.com/gist/1731728