How to create a triangle in CSS3 using border-radius

Question

I am using border-radius property to acheive rounded corners. But I am not sure how to get rounded corners of this shape. I tried giving same dimensions from either sides but they just dont give me the exact shape. Am I missing some CSS3 property here.

Just wondering if clip css property is the answer.

UPDATE:

http://jsfiddle.net/YWnzc/136/

Answer 1

Triangles in different sizes with border radius

To flip or to change vertical alignment fork translateY() and rotate()

/*triangle background large*/
.triangle-bg-lg, .triangle-bg-lg:before, .triangle-bg-lg:after { width: 25em; height: 25em; }

/*triangle background medium*/
.triangle-bg-md, .triangle-bg-md:before, .triangle-bg-md:after { width: 20em; height: 20em; }

/*triangle background small*/
.triangle-bg-sm, .triangle-bg-sm:before, .triangle-bg-sm:after { width: 15em; height: 15em; }

/*triangle background extra small*/
.triangle-bg-xs, .triangle-bg-xs:before, .triangle-bg-xs:after { width: 10em; height: 10em; }

/*triangle background extra extra small*/
.triangle-bg-xxs, .triangle-bg-xxs:before, .triangle-bg-xxs:after { width: 5em; height: 5em; }

/*common triangle style*/
.triangle-bg-lg,.triangle-bg-md, .triangle-bg-sm,.triangle-bg-xs,.triangle-bg-xxs {
    overflow: hidden;
    position: relative;
    margin:2em auto;
    border-radius: 20%;
    transform: translateY(50%) rotate(30deg) skewY(30deg) scaleX(.866);
} 
.triangle-bg-lg:before, .triangle-bg-lg:after,.triangle-bg-md:before, .triangle-bg-md:after, .triangle-bg-sm:before, .triangle-bg-sm:after,.triangle-bg-xxs:before, .triangle-bg-xxs:after{
    position: absolute;
    background: #ccc;
    pointer-events: auto;
    content: '';
}
.triangle-bg-xs:before, .triangle-bg-xs:after{
    background: #ccc;
    position: absolute;
    pointer-events: auto;
    content: '';
}
.triangle-bg-lg:before, .triangle-bg-md:before, .triangle-bg-sm:before, .triangle-bg-xs:before,.triangle-bg-xxs:before {
    border-radius: 20% 20% 20% 53%;
    transform: scaleX(1.155) skewY(-30deg) rotate(-30deg) translateY(-42.3%) 
            skewX(30deg) scaleY(.866) translateX(-24%);
}
.triangle-bg-lg:after, .triangle-bg-md:after,.triangle-bg-sm:after,.triangle-bg-xs:after,.triangle-bg-xxs:after {
    border-radius: 20% 20% 53% 20%;
    transform: scaleX(1.155) skewY(-30deg) rotate(-30deg) translateY(-42.3%) 
            skewX(-30deg) scaleY(.866) translateX(24%);
}

<div class="page-container">
    <div class="triangle-bg-lg"></div>
    <div class="triangle-bg-md"></div>
    <div class="triangle-bg-sm"></div>
    <div class="triangle-bg-xs"></div>
    <div class="triangle-bg-xxs"></div>
</div>

Answer 2

Demo

#player {
  margin: 32px;
  position: relative;
  width: 400px;
  height: 250px;
  background-color: #222;
}

#inner {
  transform: rotate(45deg);
  background-color: silver;
  width: 100px;
  height: 100px;
  top: 20px;
  left: -50px;
  position: relative;
  border-radius: 20px;
}

#outer {
  position: absolute;
  top: 50px;
  left: 165px;
  width: 70px;
  height: 140px;
  overflow: hidden;
}

<div id="player">
  <div id="outer">
    <div id="inner"></div>
  </div>
</div>

This should produce:

The effect is achieved by creating a square, rotating it with a CSS transform, rounding the corners, and clipping it with an outer box. The inner element can be adjusted as desired, so it is somewhat flexible.

http://css3shapes.com/ has some nice examples (note the heart at the bottom of the page)

Alternatives

SVG images support shapes of this type and are supported in all modern browsers. Simple SVGs can be coded by hand as XML, and there are a variety of free/paid editors for working with them.

See also: Raphaël, a library for working with vector graphics on the web