Drawing rounded triangle with CSS

I want to round this triangle:

http://jsfiddle.net/RNsW2/

to be something like this:

Is there a way to do this with CSS? I don't want to use images.

回答1:

div {
    transform: rotate(45deg);
    -ms-transform: rotate(45deg); /* IE 9 */
    -webkit-transform: rotate(45deg); /* Safari and Chrome */
    -o-transform: rotate(45deg); /* Opera */
    -moz-transform: rotate(45deg); /* Firefox */
    background-color:green;
    width:100px;
    height:100px;
    position:absolute;
    top:20px;
    left:-50px;
    -webkit-border-radius: 0 20px 0 0;
    -moz-border-radius: 0 20px 0 0;
    border-radius: 0 20px 0 0;
}

and the fiddle.

If you want the div with rounded corners to be shown correctly also in older browsers without CSS3 suppport, use this:

grab the screen with PrintScreen key, paste it to Paint program, shrink the borders and save, open in IrfanView and Save as (convert it to) transparent PNG, then convert it to Base64 image e.g. here, grab your result and your CSS is done. The result here:

div.image {
    position: absolute;
    width: 62px;
    height: 141px;
    background-image:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAD4AAACNCAIAAABg/V7IAAAABnRSTlMA/wD/AP83WBt9AAADSElEQVR42tXdz0sbQRQH8LejhNYExIisWFtDxR4KJhdDFMUfBU8KVqkXtfkj/E+8CxK96KlexARzTw/SXgu1Xirx3hSEpsn2sKWipNnd2fnxvt/jnj48Zt48GJZxPM8jzPQk3yRnx2Yh6ReZi/5E/8zzGTw6LVLlujLwZGB6dBqPTkTlb+XBvsHCswIenYjOr86x9Pd0OP0Duq9PP00XRgt4dCIqX5Uh9B3oKPrOdF/vptz8SB6PTkRnX88467vRmesD6Jz1wXS2+lB0nvqwdIb6CHRu+mh0VvrIdD56GToTvSSdg16ebl0fi25XH5duUa+Abkuvhu7rh1PDUyNTeHTzepV0w3rFdJN69XRjei10Mz1HF92AXiNdt14vXateO12f3gRdk94QXYfeHF253ihdrd40XaHeAl3VpGCHrkRvjR5fb5MeU2+ZHkdvny6tZ0GX03OhS+gZ0aPqedEj6dnRw+s50kPqmdLD6PnSA/Ws6d313Om+fjw9nnNzj74LQkjxQ/H0yykknYg2TjYu65eQdI+8teO1u993SGv9Xxq/Gs12c/nlMljV/ex93Lv9eYtXdSJqea1kIrmUWcKrOhHtf9pveS1Ier1Rr32vQdKJqHpdRaXXbmp429RPs93Mj+Qhq37z4wZ1wbS9Niod8jSFp6cSKVT6RHoClZ51s3Mv5iDpC5kFyKr3it7VV6uQ9Pmx+aG+IUj67swuZHPMubmViRU8eo/TU3lfwTuShCOqxaqbdMHowhHH744XM4tgg4BwxNH60ebrTbAZRjjiYO1ga3KrQ4Nn7i69Le1kd8Amx+5uvvRAN1N6GDdHekg3O3p4Ny96JDcjelQ3F7qEmwVdzm2fLu22TI/jtkmP6bZGj++2Q1fitkBX5TZNV+g2SlfrNkdX7jZE1+E2Qdfk1k7X59ZL1+rWSNft1kU34NZCN+NWTzfmVkw36VZJN+xWRjfvVkO34lZAt+WOS7fojkW365anW3dL0jm4ZehM3BT1Gkw44nD9cHtymxhEgLoj0Lm5w9IZukPRebqD6WzdAXTO7m505u7/0vm7O9Mh3B3oKO7HdCD3AzqW+54O5/5LR3QTkfDnbzg3EVHpc8nDjIP7EAvwbyZ/AAASPZZ53XMTAAAAAElFTkSuQmCC');
    z-index:-1;
}

and the fiddle

回答2:

You could use the CSS transformations:

.arrow-right {
    width: 0; 
    height: 0;
    position: relative;
    top: 26px;
    left: -60px;
    border: 60px solid green;
    border-top-right-radius: 15px;
    -webkit-transform:rotate(45deg);
}

See http://jsfiddle.net/n3Ttf/

My fiddle requires a Webkit browser like Safari or Chrome, but you can use different prefixes for other browsers and the filter attribute for IE: http://davidwalsh.name/css-transform-rotate