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

Question

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

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

干杯并感谢您的帮助!

Answer 1

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

我们的想法是在橙色背后设置第二个"略大"的三角形.

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

将两个三角形放在彼此之上后,我将它们向上移动2个像素,top: -2px使它们位于橙色框的顶部,从而隐藏在想要有箭头的div周围运行的黑色边框:)