Question

我在这里使用酷的CSS：

http://css-tricks.com/snippets/css/css-triangle/

我正在为一些jQuery创建一个简单的三角形。问题是，我需要三角形的两边有边框。看到三角形是由边界构成的，这让我很头疼。

在这里看一下这张照片：

enter image description here

我需要A和B两侧有边框，所以它们不会与其他橙色混合。

这是三角形本身的css峰值：

.arrow-down {
        position:relative;
        top:30px;
        margin-left:auto;
        margin-right:auto;
        padding-top:30px;
        width:0;
        height:0;
        border-left:20px solid transparent;
        border-right:20px solid transparent;
        border-top:20px solid #FF6A00;
}

所以，我愿意接受替代解决方案（不常见吗？）。我更喜欢使用我当前设置的解决方案，因为我已经投入了大量的工作。无论哪种方式，我需要这个有边框（我猜你可以叫我'绝望'）。

干杯并感谢您的帮助！

Answer 1

通过'小'改变，你可以实现这一点，我不确定这是最好的方式，但它确实有效。

这个想法是在橙色背后设置第二个“略大”的三角形。

尝试一个工作示例@ jsfiddle http://jsfiddle.net/saelfaer/e4ahw/

将两个三角形放在一起之后，我将它们向上移动2个像素top: -2px，使它们位于橙色框的顶部，从而隐藏在想要拥有的div周围的黑色边框一个箭头：）

Answer 2

这更像是一个概念性的想法，而不是一个硬答案（我真的没有CSS那么好）。但我看到人们只是通过将相同的项目放在与顶部项目相同的位置，但偏移一个或多个像素，并使用较小的z-index来删除阴影。

在这种情况下，也许你可以做类似的事情：制作第二个三角形，将其着色为黑色，并将其定位在比主红色三角形低一个像素（顶部：31px）的位置。我认为因为它会在红色三角形下方，所以它也会隐藏顶部边框，这是您要求的一部分。

Answer 3

我实际上不知道这是否适用于IE7 ......

.arrow-down {
        position:relative;
        top:30px;
        margin-left:auto;
        margin-right:auto;
        padding-top:30px;
        width:0;
        height:0;
        border-left:22px solid transparent;
        border-right:22px solid transparent;
        border-top:22px solid #000;
}
.arrow-down:before {
        content: '';
        position:absolute;
        top: -22px;
        left: -20px;
        margin-left:auto;
        margin-right:auto;
        padding-top:30px;
        width:0;
        height:0;
        border-left:20px solid transparent;
        border-right:20px solid transparent;
        border-top:20px solid #FF6A00;
}

我的 hacky解决方案 See Here

Answer 4

试试这个：http://jsfiddle.net/rSzds/1/

<强> CSS：

.arrow-down-border {
        width:0;
        height:0;
        position:relative;
        border-left:22px solid transparent;
        border-right:22px solid transparent;
        border-top:22px solid black;

}
.arrow-down {
        padding:0px;
        position:absolute;
        width:0;
        height:0;
        border-left:20px solid transparent;
        border-right:20px solid transparent;
        border-top:20px solid #FF6A00;
        margin-left: -20px;
        margin-top: -21px;
        float: left;
}

<强> HTML：

<div class="arrow-down-border">
    <div class="arrow-down">
    </div>
</div>

我还没有在IE7中测试过它。

Answer 5

我会创建一个.arrow-down-border类，黑色和第二个三角形div。

fiddle

Answer 6

＆amp;＃9660▼

＆amp;＃9661▽

＆amp;＃9662▾

＆amp;＃9663▿

＆amp;＃9947⛛

＆amp;＃9207⏷

面朝三角......但是等等......这是什么......有边界？

6 个答案: