如何添加边框的三角形在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标签

回答

相关问题