Box with Arrow top and Border

问题

I'm just going to create a box on the edge has an arrow. I have quite often tried but unfortunately relevant solution. I naturally inquired on the Internet and on the website, but unfortunately without success. So it should look after:

the arrow should have the same border like the box and the same backgroundcolor

So it looks now

.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

I'm sorry for my english

回答1:

Here's updated fiddle: FIDDLE.
You can try with this 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);
}

However, this includes transform property which is a new feature and might not work in every browser. Other solutions are fine but they won't let you add border to this little triangle. You pick the one that suits you.

EDIT:

Yet another fiddle: http://jsfiddle.net/dAdry/22/.
I also figured out how to do this without transform. You put two triangles, one grey and one white a little bit smaller.

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

Try it out and let me know if it suits you.

回答2:

Create your triangle using :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;
}

回答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

回答4:

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

This creates a border. The 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;
    }

And the 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>

来源：https://stackoverflow.com/questions/19255577/box-with-arrow-top-and-border