CODEWITHSUNDEEP
firefoxgoogle-chromecsssafari
rickypai
rickypai

Reputation: 4016

css3 triangle shape with one rounded corner

enter image description here

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.

enter image description here

enter image description here

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

thank you.

Upvotes: 5

Views: 6160

Answers (2)

Spudley
Spudley

Reputation: 168853

I think your idea of creating a triangle shape in CSS is over-thinking the problem. A CSS gradient would seem to be the simpler solution here.

It's possible to create gradients that are just an abrupt color change, and you can make them diagonal too, so it seems like it can offer exactly the solution you're after.

Now we've established a different tack to the question, we can refer to other questions like this one for reference: How to make a diagonal css gradient without the colors blending together(a sharp color change) that's displaced 70% to the right?

The only problem with CSS gradients is that they're not supported in older versions of IE. This can be resolved however. IE6/7/8 does have its own filter method of creating gradients which can do the trick, but my preference would be to use CSS3Pie, which allows you to use the standard CSS3 gradients even in old IE versions.

Hope that helps.

Upvotes: 3

Dylan
Dylan

Reputation: 66

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/

Upvotes: 5

Related Questions