cube
cube copied to clipboard
About small triangle
About small triangle Maybe, you can do more
<!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>
感谢建议,不过由于字符在不同系统和字体中表现会有些许差异,我不推荐用这样的方法来实现三角。而且字符模拟的三角可以被选中。