1

我只是要在边缘创建一个有箭头的框。我经常尝试但不幸的是相关的解决方案。我自然在网上和网站上查询，可惜没有成功。所以它应该照顾：

在此处输入图像描述

箭头应该具有与框相同的边框和相同的背景颜色

所以现在看起来

.arrow-up {
    width: 10px;
    height: 10px;
    margin-top: 0px;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 5px solid gray;
}

#log2 {
    height: 250px;
    width: 250px;
    background: white;
    border: 1px groove rgba(0, 0, 0, .35);
    position: relative;
    display: block;
    margin-top: 54px;
    float: left;
    left: 29.965%;
    z-index: 2;
    border-radius: 3.5px;
}

小提琴

我很抱歉我的英语

4

4 回答 4

2

这是更新的小提琴：FIDDLE。
你可以试试这个 CSS：

#log2 {
    border: 1px solid #ccc;
    border-radius: 3px;
    width: 300px;
    padding: 10px;
    margin: 15px auto 0;
    position: relative;
    background: #fff;
}

#log2:after {
    content: "";
    display: block;
    position: absolute;
    border-style: solid;
    border-color: #ccc;
    border-width: 1px 0 0 1px;
    width: 15px;
    height: 15px;
    top: -9px;
    right: 19px;
    background: inherit;

    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
}

但是，这包括transform属性，这是一项新功能，可能不适用于每个浏览器。其他解决方案很好，但它们不会让您为这个小三角形添加边框。你选择一个适合你的。

编辑：

另一个小提琴：http: //jsfiddle.net/dAdry/22/。
我还想出了如何在没有transform. 你放了两个三角形，一个灰色的，一个白色的小一点。

#log2 {
    border: 1px solid #ccc;
    border-radius: 3px;
    width: 300px;
    padding: 10px;
    margin: 15px auto 0;
    position: relative;
    background: #fff;
}
#log2::before, #log2::after {
    content: "";
    display: block;
    position: absolute;
    border-style: solid;
    border-width: 0 10px 10px 10px;
    right: 19px;
}
#log2::before {
    border-color: #ccc transparent;
    top: -10px;
    right: 19px;
}
#log2::after {
    content: "";
    display: block;
    position: absolute;
    border-style: solid;
    border-color: #fff transparent;
    border-width: 0 10px 10px 10px;
    top: -9px;
}

试试看，让我知道它是否适合你。

于 2013-10-08T18:43:06.150 回答
1 
.arrow-up {
        width: 0;
        height: 0;
        margin-top: 0px;
        border-left: 10px solid transparent;
        border-right: 10px solid transparent;
        border-bottom: 10px solid gray;
        }

fiddle

于 2013-10-08T18:40:53.877 回答
1

使用 :before 创建三角形

http://jsfiddle.net/dAdry/9/

#log2:before {
    content: "";
    width: 0px;
    height: 0px;
    border-style: solid;
    border-width: 0 7.5px 8px 7.5px;
    border-color: transparent transparent white transparent;
    position: absolute;
    display:block;
    top: -8px;
}
于 2013-10-08T18:40:37.573 回答
0

http://jsfiddle.net/dAdry/27/

这将创建一个边界。CSS

               .arrow-up {
    width: 0px;
    height: 0px;
    margin:0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 10px solid gray;
    }
.arrow-inner {
width:0;
height:0;
     margin:1px 0 0 0px;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 10px solid white;   
}
     #log2 {
    height: 250px;
    width: 250px;
    background: white;
    border: 1px groove rgba(0, 0, 0, .35);
    position: relative;
    display: block ;
    margin-top: 54px;
    float: left;
    left: 29.965%;
    border-radius: 3.5px;
    }

和HTML...

                    <ul id="log2" style="display: inline;">
                  <span class="arrow-up" style="top: -9px; left: 70.0%; position: absolute; background-size: 100%; z-index: 999;" ></span>
                    <span class="arrow-inner" style="top: -9px; left: 70.0%; position: absolute; background-size: 100%; z-index: 999;"></span>
                    <br/>How are u?<br/>Whats the matter? :D
                </ul>
于 2013-10-08T18:40:56.467 回答