3

我在这里使用很酷的 CSS：

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

我正在创建一个简单的三角形，我将使用一些 jQuery 来完善它。问题是，我需要三角形的两条边都有边界。看到三角形是由边界组成的，这让我很头疼。

看看这张照片：

在此处输入图像描述

我需要 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;
}

所以，我对替代解决方案持开放态度（不常见吗？）。我更喜欢当前设置的解决方案，因为我已经投入了大量工作。不管怎样，我需要这个有一个边界（我想你可以称我为“绝望”）。

干杯，非常感谢您的帮助！

4

6 回答 6

5

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

这个想法是在橙色三角形后面放置第二个“稍大”的三角形。

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

将两个三角形放在一起后，我将它们向上移动 2 个像素top: -2px，使它们位于橙色框的顶部，从而隐藏在 div 周围运行的黑色边框，您希望在其上有一个箭头:)

于 2011-10-05T23:36:39.140 回答
4

我实际上不知道这是否适用于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 解决方案 见这里

于 2011-10-05T23:45:40.027 回答
4

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

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

于 2011-10-05T23:35:22.523 回答
2

试试这个：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中测试过。

于 2011-10-06T00:03:51.893 回答
1

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

小提琴

于 2011-10-05T23:48:45.140 回答
-2

▼ ▼</p>

▽ ▽</p>

▾ ▾</p>

▿ ▿</p>

⛛ ⛛</p>

⏷ ⏷</p>

于 2017-09-24T21:42:26.503 回答