Question

我打算在上面创建一个盒子边有箭头。我经常尝试但不幸的是相关的解决方案。我自然会在互联网和网站上查询，但遗憾的是没有成功。所以它应该照顾：

enter image description here

箭头应该具有相同的边框，如框和相同的backgroundcolor

现在看起来

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

FIDDLE

对不起我的英语

Answer 1

这是更新的小提琴：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; }

尝试一下，让我知道它是否适合你。

Answer 2

使用：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;
}

Answer 3

.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

Answer 4

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>

箭头顶部和边框的框

4 个答案: