用CSS绘制圆角三角形 [英] Drawing rounded triangle with CSS

问题描述

我要绕过这个三角形：

。

如果您希望带有圆角的div也能在 ，使用 程序粘贴到

，缩小边框并保存，在 IrfanView 中打开，并另存为（将其转换为）透明PNG ，然后将其转换为Base64图像例如这里，抓住您的结果，您的CSS完成。结果如下：

  div.image {
 position：absolute; 
 width：62px; 
 height：141px; 
背景图像：网址（数据：图像/ 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 +银+ IUj67swuZHPMubmViRU8eo / TU3lfwTuShCOqxaqbdMHowhHH744XM4tgg4BwxNH60ebrTbAZRjjiYO1ga3KrQ4Nn7i69Le1kd8Amx + 5uvvRAN1N6GDdHekg3O3p4Ny96JDcjelQ3F7qEmwVdzm2fLu22TI / jtkmP6bZGj ++ 2Q1fitkBX5TZNV + g2SlfrNkdX7jZE1 + E2Qdfk1k7X59ZL1 + rWSNft1kU34NZCN + NWTzfmVkw36VZJN + xWRjfvVkO34lZAt + WOS7fojkW365anW3dL0jm4ZehM3BT1Gkw44nD9cHtymxhEgLoj0Lm5w9IZukPRebqD6WzdAXTO7m505u7 / 0vm7O9Mh3B3oKO7HdCD3AzqW + 54O5 / 5LR3QTkfDnbzg3EVHpc8nDjIP7EAvwbyZ / AAASPZZ53XMTAAAAAElFTkSuQmCC'）; 
 z-index：-1; 
} 
  

和小提琴

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.

解决方案

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

这篇关于用CSS绘制圆角三角形的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！