在...的帮助下CSS 三角形教程 http://css-tricks.com/snippets/css/css-triangle/，我学会了创建三角形。
.arrow-down {
width: 0;
height: 0;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-top: 20px solid #ccc;
}
我试图给三角形添加边框但我做不到。
what I achieved:
Expected:(trying something similar border with gray) 
Check this JSFiddle http://jsfiddle.net/Q97T7/
被困住了，无从下手。我试过outline，但没有一个起作用（我知道它不起作用）。
感谢您花时间阅读我的问题。
任何帮助表示赞赏。
Note:我正在 CSS 中尝试这个，而不是使用图像。
当主三角形或箭头本身使用 CSS 边框创建时，如果不使用额外的元素就不可能向其添加另一个边框。以下是一些选项。
选项1：使用更大尺寸的伪元素并将其放置在父元素后面以产生边框效果。
.arrow-down {
position: relative;
width: 0;
height: 0;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-top: 20px solid #ccc;
}
.arrow-down:before {
position: absolute;
content: "";
left: -22px;
top: -20px;
height: 0px;
width: 0px;
border-left: 21px solid transparent;
border-right: 21px solid transparent;
border-bottom: 21px solid transparent;
border-top: 21px solid black;
z-index: -1;
}<div class="arrow-down"></div>.arrow-down:before {
position: absolute;
content: "";
left: -22px;
top: -20px;
height: 0px;
width: 0px;
border-left: 21px solid transparent;
border-right: 21px solid transparent;
border-bottom: 21px solid transparent;
border-top: 21px solid black;
z-index: -1;
}
选项2：旋转元素（它具有边框黑客以产生三角形），然后添加一个box-shadow to it.
.arrow-down {
width: 0;
height: 0;
margin: 10px;
border-left: 0px solid transparent;
border-right: 30px solid transparent;
border-top: 30px solid #ccc;
-ms-transform: rotate(225deg); /* IE 9 */
-webkit-transform: rotate(225deg); /* Chrome, Safari, Opera */
-moz-transform: rotate(225deg);
transform: rotate(225deg);
box-shadow: 0px -3px 0px -1px #444;
}<div class="arrow-down"></div>.arrow-down {
width: 0;
height: 0;
margin: 10px;
border-left: 0px solid transparent;
border-right: 30px solid transparent;
border-top: 30px solid #ccc;
transform: rotate(225deg); /* browser prefixes added in snippet */
box-shadow: 0px -3px 0px -1px #444;
}
在 Chrome v24 和 Safari v5.1.7 中测试。也应该适用于其他 CSS3 兼容浏览器。
以下选项不能直接回答问题，因为它不会在边框内添加边框，而是生成带边框的箭头/三角形的其他方式。
选项 3：在元素上使用线性渐变，旋转它以生成三角形，然后使用正常边框属性为其添加边框。
.arrow-down {
width: 30px;
height: 30px;
margin: 10px;
border-left: 2px solid #444;
background: -webkit-linear-gradient(45deg, #ccc 50%, transparent 50%);
background: -moz-linear-gradient(45deg, #ccc 50%, transparent 50%);
background: -o-linear-gradient(45deg, #ccc 50%, transparent 50%);
background: linear-gradient(45deg, #ccc 50%, transparent 50%);
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
transform: rotate(-45deg);
-webkit-backface-visibility:hidden; /** <-- to prevent diagonal line aliasing in chrome **/
}<div class="arrow-down"></div>.arrow-down {
width: 30px;
height: 30px;
margin: 10px;
border-left: 2px solid #444;
background: linear-gradient(45deg, #ccc 50%, transparent 50%);
transform: rotate(-45deg);
backface-visibility:hidden;
}
选项 4：使用旋转的伪元素（以背景作为三角形的颜色）生成三角形，然后为其添加正常边框。父元素的溢出设置为隐藏，并且伪元素被适当定位，以便仅显示其一半（创建三角形的错觉）。
.arrow-down {
position: relative;
height: 50px;
width: 50px;
overflow: hidden;
}
.arrow-down:before {
position: absolute;
content: '';
top: -webkit-calc(100% * -1.414 / 2);
top: calc(100% * -1.414 / 2);
left: 0px;
height: 100%;
width: 100%;
background: #CCC;
border-left: 2px solid #444;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
transform: rotate(-45deg);
}<div class="arrow-down"></div>.arrow-down:before {
position: absolute;
content: '';
top: calc(100% * -1.414 / 2);
left: 0px;
height: 100%;
width: 100%;
background: #CCC;
border-left: 2px solid #444;
transform: rotate(-45deg);
}