用CSS边框防止奇怪的'凹凸'

使用CSS通过使用'border-width'参数创建三角形。用CSS边框防止奇怪的'凹凸'

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

创建像

Weird big

根据您的屏幕输出，你可能会或可能不会注意到，但如果放大到三角形的中心有一个小（可能1px的）“凸块”这使得三角形看起来很奇怪

Weird small

如何将得到一个纯CSS [3]直角吨在中间没有这个奇怪的凹凸？

来源

2012-02-03 Smudge

什么浏览器/操作系统你看到这个？我只是做了一个jsfiddle，对我来说看起来很好。 – MrMisterMan 2012-02-03 16:58:46

Firefox，OS/X。 FF和Chrome看起来都一样。 Safari和Opera很好。我不在乎IE（我也没有） – Smudge 2012-02-03 17:06:24

这可能是一个浏览器/操作系统特定的渲染问题，除了调整边框尺寸之外，你无法做任何事情。 – j08691 2012-02-03 17:11:07

如果更改每个边框颜色，您会注意到顶部和底部三角形不会触碰。您可以将宽度更改为1px以更正它。

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

来源

2012-02-03 17:53:57 Duopixel

只能使用两个边界的，所以不会有一个凹凸：

#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

来源

2012-02-03 18:53:50 kizu

用CSS边框防止奇怪的'凹凸'

回答

相关问题