I'm trying to use css to create a rounded, folded corner illusion for a div.
I cannot figure out why this fairly simple html/css renders strangely in opera (v.12.10) but looks fine in chrome and firefox. When I apply a border-radius to the div, a strange notch appears within the border, on opera only. Please see the jsfiddle above to see an example.
I'd love to hear a fix or at least an explanation as to what's going on with Opera in this case.
<body>
<div class="example"></div>
</body>
body
{
background-color: gray;
padding: 50px;
}
div.example
{
border-bottom-left-radius: 10px;
border-color: transparent transparent white white;
border-style: solid;
border-width: 30px;
display: block;
width: 0;
height: 0;
}
It seems to be an opera bug. So you can fix it manually by putting another div in front of the glitch http://jsfiddle.net/aN4XP/
<div class="example">
<div class="operaFix"></div>
</div>
Here the additional css:
div.operaFix
{
border-bottom-left-radius: 10px;
border-color: white;
border-style: solid;
border-width:10px;
display:block;
margin-left:-30px;
margin-top:10px;
width: 0;
height: 0;
}
Other browsers should not be affected of this.
来源：https://stackoverflow.com/questions/13304688/border-radius-rendering-strangely-in-opera-fine-in-chrome-firefox