有箭头上面和边界的箱子 [英] Box with Arrow top and Border

问题描述

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

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

  .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

对不起我的英语

解决方案

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

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

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

解决方案

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.

这篇关于有箭头上面和边界的箱子的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！