html - 如何使用纯CSS将三角形更改为向上箭头

Question

这是小提琴示例：示例

问题1：我有一个流动的箭头三角形css：

.wrapper {
    background-color: black;
    width: 100px;
    height: 100px;
}

.downArror {
    float: left;
    display: inline-block;
    border: 15px solid rgba(0, 0, 0, 0);
    border-bottom-color: #fff;
    margin: 8px;
}

HTML：

<div class="wrapper"><div class="downArror"></div></div>

只是想知道，有没有办法改变使这个三角形变成'^'形状的css？

我想要的是这样的：

问题2：

有没有办法用代码做这样的勾号？： 我目前正在使用 √ 但形状略有不同

Answer 1

我实际上为菜单创建了这个效果。你可以在这里找到它：

http://codepen.io/spikeyty/pen/IFBro

基本上，我采用了一个透明的 div，添加了左下角和右下角边框，然后使用变换将 div 旋转了 45 度。为了更加甜美，该示例具有简洁的悬停效果。享受！

Answer 2

使用 css 是可能的：（希望你是这个意思）

.wrapper{
    background-color:black;
    width:20px;
    height:20px;
    text-align:center;
 }

.downArror_black:before{
	content:'\2227';
    color:#fff;
}

.tick:before{
    content:'\2713';
    color:#fff;
}

<div class="wrapper">
    <div class="downArror_black"></div>
</div>
<br />
<div class="wrapper">
    <div class="tick"></div>
</div>