朝下的三角形......但是等等......这是什么......有边界？答案

【问题标题】：Down facing triangle... but wait... what is this... with borders?朝下的三角形......但是等等......这是什么......有边界？
【发布时间】：2017-09-25 05:42:26
【问题描述】：

我在这里使用了很酷的 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;
}

所以，我愿意接受替代解决方案（不常见，对吧？）。我更喜欢当前设置的解决方案，因为我已经投入了大量工作。不管怎样，我需要这个有一个边框（我猜你可以称我为“绝望”）。

非常感谢您的帮助！

【问题讨论】：

你愿意放弃IE吗？还是您需要支持特定版本（及更高版本）？
@DavidThomas 我真的需要对 IE7 的支持，很遗憾。我正在为一家虚拟公司发布此内容，并且大多数客户都可以访问 IE7。
你能在“CHECK”这个词上加个边框吗？
@JamesKhoury 不，只是因为箭头会在单词上方。好主意虽然 +1。

标签： html css border css-shapes

【解决方案1】：

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

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

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

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

【讨论】：

对不起，user470714首先回答的基本相同。你的 jsfiddle 很好，但我已经想好怎么做了。为辛勤工作+1！
这对我有帮助。对于任何希望箭头指向左侧（并有边框）的人，您可以使用我的调整版本：jsfiddle.net/e4ahw/4

【解决方案2】：

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

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

【讨论】：

这是天才（我认为）。我已经在尝试考虑这样的事情了。我的想法的问题是我走的是另一条路。我将如何制作一个倒三角形。傻我。谢谢，我马上测试一下！

【解决方案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

【讨论】：

哦，我喜欢，聪明的方法。可悲的是，我已经让它工作了。 +1 以获得很好的答案！
您可能需要在覆盖层上调用z-index...也许不需要。
到目前为止，我在分层方面没有任何问题。还是）感谢你的建议！ +1

【解决方案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 中测试过。

【讨论】：

【解决方案5】：

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

fiddle

【讨论】：

【解决方案6】：

▼ ▼

▽▽

▾ ▾

▿ ▿

⛛ ⛛

⏷ ⏷

【讨论】：