css - 部分后的 CSS 唯一透明箭头

Question

我试图找出如何在这样的部分之后制作一个透明的向下箭头：

http://i.stack.imgur.com/tkwk6.png

我尝试了很多事情，但找不到任何方法。

.intro:after {
position: absolute;
width: 50%;
left: 50%;
bottom: -1px;
height: 31px;
background: #f9f9f9;
content: '';
-moz-transform: skewX(-45deg);
-webkit-transform: skewX(-45deg);
-o-transform: skewX(-45deg);
-ms-transform: skewX(-45deg);
transform: skewX(-45deg);
margin: 0 14px;
}

.intro:before {
left: auto;
right: 50%;
-moz-transform: skewX(45deg);
-webkit-transform: skewX(45deg);
-o-transform: skewX(45deg);
-ms-transform: skewX(45deg);
transform: skewX(45deg);
}

就像那样，尽管这使它比视图更宽。

Answer 1

从这里生成http://cssarrowplease.com/

.arrow_box { position: relative; background: #88b7d5; border: 4px solid #c2e1f5; } .arrow_box:after, .arrow_box:before { top: 100%; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; } .arrow_box:after { border-color: rgba(136, 183, 213, 0); border-top-color: #88b7d5; border-width: 30px; left: 50%; margin-left: -30px; } .arrow_box:before { border-color: rgba(194, 225, 245, 0); border-top-color: #c2e1f5; border-width: 36px; left: 50%; margin-left: -36px; }

Answer 2

这就是你要找的东西。我为一个项目做过

http://jsfiddle.net/cancerian73/kqZMf/6/

我在伪元素上使用了边框技术并绘制了一个彩色三角形

.nav > li > ul:before {
content:'';
position:absolute;
z-index:2;
right:15px;
top:0px;
border:15px solid #db7e11;
border-bottom-color:transparent;
border-left-color:transparent;
border-right-color:transparent;
 }