css3 triangle shape with one rounded corner
css, firefox, google-chrome, safari
Solution
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/
Problem
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.