Question

I am trying to implement this dialogue box without reverting to using images for the top right corner. The following is my implementation for it.

.box{
    -webkit-border-radius: 6px 6px;
    -moz-border-radius: 6px / 6px;
    -khtml-border-radius: 6px / 6px;
    border-radius: 6px / 6px;
    width:33%;
    border: 1px solid #DDD;
    display: inline-block;
    margin-right:10px;
    margin-bottom: 10px;
    max-width: 290px;
    padding: 10px;
}

.triangle-topright { 
    width: 0; 
    height: 0; 
    border-top: 50px solid #fafad6; 
    border-left: 50px solid transparent;
    -webkit-border-top-right-radius: 6px 6px;
    -moz-border-radius-topright: 6px / 6px;
    -khtml-border-top-right-radius: 6px / 6px;
    border-top-right-radius: 6px / 6px;
    float: right;
    margin-top: -10px;
    margin-right: -10px;
}

<div class="box">
   <div class="triangle-topright"></div>
   <h3>title</h3>
   <p>stuff</p>  
</div>

The problem is this works for safari, but for chrome, -webkit-border-top-right-radius: 6px 6px; seems to cause a conflict. When it is activated, the top right will be rounded, but the triangle will disappear.

is there a workaround to this? or is there a better way to do this?

thank you.

Answer 1

One solution that appears to work (tested in Chrome, Safari, Firefox) is removing the following lines from .triangle-topright

-webkit-border-top-right-radius: 6px 6px;
-moz-border-radius-topright: 6px / 6px;
-khtml-border-top-right-radius: 6px / 6px;
border-top-right-radius: 6px / 6px;

And instead simply adding overflow: hidden; to the .box css.

Demo: http://jsfiddle.net/BcrKH/