cube icon indicating copy to clipboard operation
cube copied to clipboard

About small triangle

Open leibnizli opened this issue 10 years ago • 2 comments

About small triangle Maybe, you can do more

leibnizli avatar Mar 10 '14 15:03 leibnizli

<!doctype html>
<html>

<head>
    <meta charset="utf-8" />
    <title>test</title>
    <style type="text/css">
    span {
        display:inline-block;
    }
    .arrow {
        width:0;
        height:0;
        border-width:10px 6px;
        border-style:solid;
        border-color:#ff8080 #ff8080 transparent transparent;
    }
    .arrow-char {
        width: 6px;
        height: 14px;
        line-height: 15px;
        margin-bottom: -3px;
        font-size: 12px;
        font-family:'宋体';
        overflow: hidden;
    }
    .arrow-rotate {
        -moz-transform: rotate(-90deg);
        -webkit-transform: rotate(-90deg);
        -o-transform: rotate(-90deg);
        transform: rotate(-90deg);
        filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
        position: relative\9;
        top:4px\0;
        *top:-2px;
    }
    .arrow-char-top {  
        text-indent:-6px;
    }
    </style>
</head>
<body>
    <span class="arrow"></span>
    <br />
    <span class="arrow-char">◆</span>
    <br />
    <span class="arrow-char arrow-rotate">◆</span>
    <br />
    <span class="arrow-char arrow-char-top">◆</span>
    <br />
    <span class="arrow-char arrow-char-top arrow-rotate">◆</span>
</body>

</html>

leibnizli avatar Mar 10 '14 15:03 leibnizli

感谢建议,不过由于字符在不同系统和字体中表现会有些许差异,我不推荐用这样的方法来实现三角。而且字符模拟的三角可以被选中。

yisibl avatar Mar 11 '14 02:03 yisibl