用 CSS 绘制圆角三角形答案

【问题标题】：Drawing rounded triangle with CSS用 CSS 绘制圆角三角形
【发布时间】：2012-08-12 16:11:55
【问题描述】：

我想圆这个三角形：

变成这样：

有没有办法用 CSS 做到这一点？我不想使用图片。

【问题讨论】：

【解决方案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;
}

和the fiddle。

如果您希望在不支持 CSS3 的旧版浏览器中也能正确显示圆角 div，请使用以下命令：

用PrintScreen键抓取屏幕，粘贴到Paint程序，缩小边框并保存，在IrfanView打开并另存为（转换为）透明PNG，然后将其转换为Base64图像，例如here，获取你的结果，你的 CSS 就完成了。结果在这里：

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;
}

和the fiddle

【讨论】：

【解决方案2】：

您可以使用 CSS 转换：

.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);
}

见http://jsfiddle.net/n3Ttf/

我的小提琴需要像 Safari 或 Chrome 这样的 Webkit 浏览器，但您可以为其他浏览器使用不同的前缀，并为 IE 使用过滤器属性：http://davidwalsh.name/css-transform-rotate

【讨论】：