如何添加邊框的三角形在div標籤

我有一個div標籤，如何添加邊框的三角形在div標籤

__________ 
|   |  
|   |  
|   |  
|__________|

我想通過它添加一個小三角形。

_______/\_ 
|   |  
|   |  
|   |  
|__________|

注意：我想我的div標記具有某種顏色的邊框，而另一個div的主體。說，我的div背景將是白色的，邊框應該是藍色的。請參閱此。 http://fiddle.jshell.net/pausP/

來源

2013-04-26 unkn0wn

它是否必須有輝光/陰影效果？ – likeitlikeit 2013-04-26 13:06:58

是的。這應該。 @Pete我已經創建了三角形的div框，只有問題是給它一個邊框顏色和陰影。 – unkn0wn 2013-04-26 13:07:18

@ user2207792已經爲您提供了一個解答 – Pete 2013-04-26 13:30:42

使用帶有指針和陰影初始框http://cssarrowplease.com/可以restyle他們做出你想要的形狀：

.arrow_box { 
    top:40px; 
    position: relative; 
    background: #ffffff; 
    border: 1px solid #719ECE; /*set border colour here*/ 
    width: 200px; 
    height: 200px; 
    border-radius: 3px; 
    -webkit-filter: drop-shadow(0 1px 10px rgba(113,158,206,0.8)); /*set shadow colour and size here*/ 
    -moz-box-shadow: 0 1px 10px rgba(113, 158, 206,0.8); 
    filter: drop-shadow(0 1px 10px rgba(113, 158, 206,0.8)); 
} 
.arrow_box:after, 
.arrow_box:before { 
    bottom: 100%; 
    border: solid transparent; 
    content: " "; 
    height: 0; 
    width: 0; 
    position: absolute; 
    pointer-events: none; 
} 

.arrow_box:after { 
    border-color: rgba(255, 255, 255, 0); 
    border-bottom-color: #ffffff; 
    border-width: 19px; 
    left: 50%; 
    margin-left: -19px; 
} 
.arrow_box:before { 
    border-color: rgba(113, 158, 206, 0); 
    border-bottom-color: #719ECE; 
    border-width: 20px; 
    left: 50%; 
    margin-left: -20px; 
}

http://fiddle.jshell.net/pausP/3/

，如果你需要移動的箭頭進一步向右，然後就玩與left爲.arrow_box:after和.arrow_box:before

來源

2013-04-26 13:28:48 Pete

謝謝！我也在嘗試，但無法獲得三角形的發光效果。現在我感謝你了！ – unkn0wn 2013-04-26 13:34:10

它只是美麗的！再次感謝你！ – unkn0wn 2013-04-26 13:35:08

[此帖]（http：// stackoverflow。com/questions/21133763/webkit-filter-drop-shadow-for-other-browsers）可能會對此有所幫助，如果你想在其他瀏覽器中使用投影 – Pete 2015-11-19 11:41:33

-2

您可以在圖形編輯器中創建三角形圖像，然後將該圖像放入DIV中，然後通過絕對定位DIV和設置TOP和LEFT座標將該DIV浮動到固定座標。

來源

2013-04-26 13:07:43

這更像是修補我的代碼。和incase過度變焦我不會能夠正確顯示我的標記，雖然如果它的向量（？）。 – unkn0wn 2013-04-26 13:10:14

-2

首先你必須製作一個像/ \的圖像，你想要一個邊框顏色，然後保存該.png圖像首選位置然後移動到CSS代碼爲該圖像定位，因此使用以下代碼：

背景圖像：網址（圖像/ triangle_img.png）; background-repeat：no-repeat; background-position：top;

並添加此代碼與您指定的div樣式。我只給代碼放置一個三角形邊界與分界

來源

2013-04-26 13:29:24 Deva

「皮特」高於http://fiddle.jshell.net/pausP/3/的答案顯示瞭如何做到這一點，與參數一起玩一點看看事情是如何工作的。對於那些沒有很好地理解它的工作原理的人來說，閱讀本文將展示如何從邊界（我的意思是說原理）製造三角形。 https://css-tricks.com/snippets/css/css-triangle 。

然後它只是在使用前後使用，以及我們可能只使用一個取決於我們想要的，實際上之前用於使藍色三角形和白色三角形之後它們疊加一個在另一個之上，與1px差異，以便在三角形中具有該邊界，但如果不需要，則可以使用前面的例子。（你可以稍微改變邊界，看看它是如何）。跳躍是有幫助的。

來源

2017-05-18 14:51:44

如何添加邊框的三角形在div標籤

回答

相關問題