CSS只有透明箭頭後段

-1

林試圖找出如何才能讓一個透明下來像這樣的部分後箭頭：CSS只有透明箭頭後段

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); 
}

像這樣，雖然這使得它比視圖更寬。

來源

2013-08-17 Sam Pettersson

>我已經試過無數的東西....他們在哪裏？？給我們看一看？？？ –

透明下來指向箭頭....這是什麼意思???? ..如果箭頭是透明的..如何可以顯示它 –

我的意思是說，它應該繼承從部分的背景，白色的側面和一個透明的箭頭指向中間，如果您檢查圖像，它是頂部的漸變背景，底部是下一部分的白色背景。 –

生成這是你在找什麼。我曾經爲一個項目

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

我用僞元素的邊界TECHNIC完成，畫一個彩色三角形

.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; 
}

來源

2013-08-17 11:21:00 San

從這裏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; }

來源

2013-08-17 10:07:14

這不是這樣做的，我需要向下的箭頭來繼承該部分的背景（或者像------ \ Transparent/-------一樣透明） –

CSS只有透明箭頭後段

回答

相關問題