如何在div标签上添加边框三角形 [英] How to add bordered triangle over a div tag

问题描述

我有一个div标签，

 __________
|          |    
|          |    
|          |    
|__________|

我要在其上添加一个小三角形。

I want to add a small triangle over it.

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

注意：我想要我的div标签具有某种颜色的边框，说，我的div背景将是白色的，边框应该是蓝色的。
请参见。
http://fiddle.jshell.net/pausP/

Note: I want my div tag with border of certain color, and div body of another. Say, my div background will be white and border should be blue. See this please. http://fiddle.jshell.net/pausP/

推荐答案

使用带有指针和阴影的初始框，在 http://cssarrowplease.com / ，您可以修改它们以使您想要的形状：

Using the initial box with pointer and shadows at http://cssarrowplease.com/ you can restyle them to make the shape you want:

.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/

如果您需要移动箭头，然后在 .arrow_box：之后和 .arrow_box之后，使用左之前

if you need to move the arrow further right, then just play with the left for .arrow_box:after and .arrow_box:before

这篇关于如何在div标签上添加边框三角形的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！