How do I make a CSS triangle with smooth edges?

Tags: css,geometry,css-shapes,smooth,edges

Problem :

I have a triangle (JSFiddle) using this CSS:

.triangle {
    width: 0;
    height: 0;
    border-top: 0;
    border-bottom: 30px solid #666699;
    border-left: 20px solid transparent; 
    border-right: 20px solid transparent;

And this HTML:

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

This makes a triangle, but the diagonal lines are jagged and pixelated. How can I make them smooth? (I was able to smooth them out in Safari and Chrome by making them dotted, but that broke the triangles in Firefox and IE.)

Solution :

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 Howto..

    How to have multiple CSS transitions on an element?

    How to make my asp chart scrollable in the x direction

    How to read and show accelerometer data (server side) using JavaScript and Node.js

    2nd image appears as mirror image in IE— CSS image FLIP transform- How to fix?

    How to call
  • tag CSS
  • CSS - how to avoid class= for every single paragraph?

    HTML/CSS - How to make text-overflow in line with each other?

    How to create a sub folder on Page?

    How to set a CSS settings only to the td of an external table but not to the internal table?

    How to re-size inputs for a <%= form_for %> form in Ruby on Rails

    CSS: How to center a bottom-fixed menu

    How to make the contents of a div not wrap?

    How to create a list with three columns in a row by css and html?

    How to turn off spell checking in CSS?

    How can I apply CSS Mixins with native Javascript?

    how can bring to front clicked div in jquery?

    how to use !important in jQuery animate() function

    How to change the background color of a non selected cell in JavaFx 8 table view

    how to deal with repeated letters in a javascript hangman game

    How to implement fluid font size using pure CSS

    Can User-Agent affect how CSS is rendered on a page?

    How to style an add to cart

    How does jQuery .fadeTo() work?

    how to apply transform rotate all browse in inline css using jquery

    How to expand wrapper when content is more?(with CSS)

    How to place an icon on the first line and text on the second line?

    How to get border radius and gradient background working together in IE 9

    nth-of-type css, how to setup it properly

    How to align submenu to the left of container

    How can i concatenate the following css string in php without creating another variable or breaking the string?