How to create a triangle in CSS3 using border-radius

css triangle with border
css triangle generator
css shapes with text inside
css corner triangle with text
css shapes generator
border-radius shapes
css triangle background
css triangle with border-radius

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.



#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>

CSS Triangle, HTML You can make them with a single div. It's nice to have classes for each direction possibility. CSS The idea is a box with zero width and  (when the left and top border-color are different the edge is diagonal, that’s being used to make this triangle). Thanks, TeMc, now it all makes sense. By the way, it’s fun to play with the inner div’s right border width, and change the shape and size of the triangle! thanks for making it clear..

If I have understood your question properly. I think you can use something like below:


#box{   border-color: transparent transparent transparent #FFFFFF;
    border-style: solid;
    border-width: 50px 0 50px 75px;
    height: 0;
    left: -40px;
    margin: 40px;
    position: absolute;
    width: 0;
 #outerbox{  background:red;
    height: 300px;
    position: relative;
    width: 122px;


<div id="outerbox"><div id="box"></div></div>


The Shapes of CSS, CSS is capable of making all sorts of shapes. Add border-radius and you can round that shape, and enough of it you can turn those transforming, and many other tricks, we can make lots of shapes in CSS with only a Triangle Bottom Left  Probably the most popular approach to creating CSS triangles is the border hack: If you set height and width of an element equal to 0, then apply a transparent border, if you then set only one border color (e.g., border-bottom-color) to any value you want, you end up with a triangle.

If all you want is a right triangle, this should be all you need:

#box {
  border-top: 100px solid transparent;
  border-right: 100px solid transparent;
  border-bottom: 100px solid transparent;
  border-left: 100px solid #990000;
  margin: 40px;

No need for border-radius, and certainly not SVG. This should work in all modern browsers, and IE8+ (I still have a hard time calling IE8 modern).


More about CSS triangles:

Creating rounded triangles in CSS with clip-path, In this quick tutorial, we'll take a look at a practical example where the clip-path CSS property can make your life easier. We're going to design  We’re going to have 6 main colors that we’ll use in our flower. Best practice is to create variables for each of them. This will allow us to use them easily. To do so, we’ll use CSS variables. We will declare them at the root of our document, so place this on top of your CSS file.

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>

CSS Shapes Explained: How to Draw a Circle, Triangle, and More , Creating shapes with CSS is usually a combination of using width, height, top, To create a circle we can set the border-radius on the element. You can create a CSS triangle, but not a CSS triangle that is itself a gradient. The only trick I would suggest is to pick a color that most resembles the color within the gradient background. It just depends on how big your gradient actually is, and how well the triangle will blend in.

This is even better


.c1 {
    position: relative;
    top: -65px;
    left: 25px;
    border: 2px solid rgba(0,255,0,.6);
.c2 {
    width: 50px;
    height: 72px;
    background-color: yellow;
    z-index: 10000;
    border: 2px solid rgba(0,255,0,.6);
    border-right: 0;


<div class="c2">Hello</div>
<div class="c1"></div>


border radius top left on triangle using CSS Quick Tips, Wrap it inside a parent div and give the parent border <div class="parent"><d I want to make only one rounded corner for a triangle but I'm unable to make it. triangle with one rounded corner with at CSS3's border-radius property and

Turn Your Elements Into Shape Shifters Using Just Css! [Examples , While I a circle! Okay, circles are easy let's see what else we can do with border radius. Let's make an ellipse. The real trick  Using borders to produce angled shapes. This is a suppliment to the tutorial, and is here only for illustrative purposes. It is not part of the main tutorial. These examples will not work in Netscape 4 or WebTV, because they do not allow you to define individual borders, or Escape because it does not handle borders correctly.

Play with border radius and triangle, About CSS Preprocessors. CSS preprocessors help make authoring CSS easier. All of them offer things like variables and mixins to provide convenient  Add a width and height and you have the exact size rectangle you need. Add border-radius and you can round that shape, and enough of it you can turn those rectangles into circles and ovals. We also get the ::before and ::after psuedo elements in CSS, which give us the potential of two more shapes we can add to the original element.

CSS triangle generator, You can also give this rectangle various border-radius styles, providing various opportunities for rounded containers. How to make rounded images with CSS. Since CSS shapes are becoming more important to website development, I thought that a simple list of how to create the most common shapes was in order. You’ll find that most of these shapes are very simple to achieve and that they are not that complicated at all. However, at the same time, they will save you a lot of trouble. CSS3 shapes

  • Um, that is a triangle. Where are the rounded corners?
  • How are you drawing this? is it an image?
  • do you have any code to show?
  • @Izzey This is an image but I have made this a div. I am using border-radius
  • possible duplicate of Drawing rounded triangle with CSS
  • Thanks but I need to draw this triangle on top of a div that has say width and height of 400px and this triangle sits in the center of this div.
  • css3shapes has my answer. but I dont think I can superimpose any of those shapes on top of a div
  • You can absolutely position the shape you want on top of another div.
  • Woah... no need to use SVG for a triangle. You can use the border property alone, which when used properly to create a triangle, should work in IE7+ and pretty much all of Firefox, Chrome and Safari
  • @TimMedora: I want the edge and not the curve . Actually it should be atriangle
  • This doesn't include rounded corners, as asked for in the question.
  • Thats a pentagon and not a Triangle.
  • That doesn't seems to be triangle
  • Please don't post code only answers. Go ahead and add an explaination.