How to Make a CSS Triangle with Smooth Edges

How do I make a CSS triangle with smooth edges?

Even in pure CSS we can get the smooth diagonals.

.triangle {
    width: 0;
    height: 0;
    border-top: 0;
    border-bottom: 30px solid #666699;
    border-left: 20px solid rgba(255, 255, 255, 0); 
    border-right: 20px solid rgba(255, 255, 255, 0);
}

Instead of giving transparent you can make use of rgba(255, 255, 255, 0). This again gives transparent. But the alpha=0 makes smooth diagonals.

Check the browser support for rgba css-tricks.com/rgba-browser-support

Thanks

How to make 3-corner-rounded triangle in CSS

My best attempt: http://dabblet.com/gist/4592062

Pixel perfection at any size, uses simpler math than Ana's original solution, and is more intuitive in my opinion :)

.triangle {

 position: relative;

 background-color: orange;

 text-align: left;

}

.triangle:before,

.triangle:after {

 content: '';

 position: absolute;

 background-color: inherit;

}

.triangle,

.triangle:before,

.triangle:after {

 width:  10em;

 height: 10em;

 border-top-right-radius: 30%;

}

.triangle {

 transform: rotate(-60deg) skewX(-30deg) scale(1,.866);

}

.triangle:before {

 transform: rotate(-135deg) skewX(-45deg) scale(1.414,.707) translate(0,-50%);

}

.triangle:after {

 transform: rotate(135deg) skewY(-45deg) scale(.707,1.414) translate(50%);

}

<div class="triangle"></div>

Triangle with one rounded corner

I know this is a little hacky, but I don't think there is an easy way to do this with a single class.

All I've done is rotated a box 45 degrees with border-radius:10px and then contained it in another div with width set to the desired width of your arrow and overflow:hidden so that everything that spills over is invisible.

.arrow-left {

  position: absolute;

  width: 100px;

  height: 100px;

  left: 20px;

  background: black;

  -webkit-transform: rotate(45deg);

  transform: rotate(45deg);

  border-radius: 10px;

}

.cover {

  position: absolute;

  height: 100px;

  width: 40px;

  overflow: hidden;

}

<div class="cover">

  <div class="arrow-left"></div>

</div>

css rounded corner of right angled triangle

Here is an idea where you can rely on 2 pseudo element and some background coloration to approximate it. You simply need to find the correct value to have the perfect overlap between both pseudo elements.

h1 {

  padding-left:1em;

  position:relative;

}

h1:before {

  content: "";

  position:absolute;

  left: 0;

  top: calc(50% - 0.35em);

  width: 0.7em;

  height: 0.7em;

  background: linear-gradient(to bottom left, #34495e 50%, transparent 50%);

  border-radius: 0.1em;

}

h1:after {

  content: "";

    position: absolute;

    left: 3.8px;

    top: -0.1px;

    width: 0.92em;

    height: 0.8em;

    margin-right: 10px;

    background: linear-gradient(to top,#34495e 3.5px,transparent 5px);

    border-radius: 0.1em;

    transform: rotate(45deg);

    z-index: -1;

}

<h1>Heading</h1>

Change the shape of the triangle

Change the border-left on .guideList .activePointer to something like 7px instead of 11... the more you drop that value, the wider the angle will get.

.guideList .activePointer{
    margin-top: -5px;
    margin-bottom: -5px;
    float: right;
    display: inline-block;
    width: 0px;
    height: 0px;
    border-top: 11px solid white;
    border-left: 7px solid transparent;
    border-bottom: 11px solid white;
    -webkit-transform: rotate(0.05deg); // added to smooth edges in Chrome
}

Is it possible to make a rounded triangle with just CSS?

To actually answer your question (and provide the first answer without border-radius): If you want a CSS only solution, you will have to use border-radius.

Nevertheless I would highly recommend to use SVG for creating shapes, as simple shapes like this are easy to create manually, it's responsive, it's widely supported now and (as @chharvey mentioned in the comments) semantically more appropriate.

<svg viewbox="0 0 50 50" height="56px">

  <path d="M1 50 V10 Q1 1 10 1 H50z" fill="#ff4369" />

</svg>

How to create a triangle in CSS3 using border-radius

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>

How to make an arrow triangle in CSS with smooth sides?

You need to use a pseudo element and rotate it:
DEMO

---

CSS:

.arrow_up
{
    width: 100px; 
    height: 50px; 
    position:absolute;
    top:150px;
    left:250px;
    overflow:hidden;/* hide part of the pseudo overflowing*/
}
.arrow_up:before {
    content:'';
    position:absolute;
    width:100%;
    padding-top:100%;/* it will draw a square , change this value for other degrees angles*/
    transform:rotate(45deg);/* we'll see a corner */
    background:black;
    top:20px;/* tune this according to size of parent or size to be seen */
}

Do not forget to add vendor-prefix or use a script that adds them automaticly.

---

The use o a pseudo element allows to add content in the box : ie. http://codepen.io/gc-nomade/pen/gdoGA

---

Related Topics