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-tricks.com/rgba-browser-support

Thanks


    CSS Howto..

    How to make hover buttons?

    How can I set up my menu to slide out, only when the header is hovered on?

    How to remove css from DOM

    How to segregate these divs with 'position:absolute' into different groups?

    How can I make an element fit to fill the right part of the window?

    How to free a paragraph from its CSS style?

    How to get css value of an element inside array?

    How can I move all my CSS box shadows back under div

    How to do something like border-top-left-color. [CSS]

    How to neaten css shapes?

    How to apply CSS color on parent element using a color picker?

    how to apply two classes of css on same element?

    How to include css in my JSP?

    How do I align two non-fixed width divs in the center of the browser screen?

    How to spread elements evenly (horizonatly)?

    How can I apply jQuery .css style to descendant div [closed]

    How to add Active states and icons in wordpress wp_nav_menu()

    How to make children auto fit parent's width only with CSS?

    How can i stop my text css from over-riding my form on my blog?

    how to load external div into a master.html div from a number of submenu items

    How do I hide scroll bar by default

    How to go about making an image move up in the div on hover

    How to fix flexbox position:fixed navbar JS/CSS bug

    How to prevent a div element to be affected by the box-shadow of another div element?

    How to change this FontAwesome to image in Css?

    how to recreate tex's over- underbracket using css

    How To Make iPhone6 Plus Landscape Mode Work Better with Bootstrap3?

    How to have an asp.net ajax control automatically reference css files

    How to send CSS to the client using HTTP response headers?

    how to position a container in the middle of the screen? [duplicate]