css - 使用 CSS 边框防止奇怪的 'bump'

Question

使用 CSS 通过使用 'border-width' 参数创建三 Angular 形。

<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>

创建类似的输出

根据您的屏幕，您可能会注意到也可能不会注意到，但是如果您放大到三 Angular 形的中心，则会有一个小的(可能是 1 像素)“凸起”，这会使三 Angular 形看起来很奇怪

我怎样才能得到一个中间没有这个奇怪凸起的纯 CSS[3] 直 Angular 三 Angular 形？

Answer 1

如果您更改每种边框颜色，您会注意到顶部和底部的三 Angular 形没有接触。您可以将宽度更改为 1px 以更正它。

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