Javascript 如何使三角形边框在顶部响应

尝试使三角形边界响应。下面是代码笔的直接链接。您可以看到白色详细信息框上方的边框。截图-

<!-- Features -->
<div class="section text-center">
    <div class="row no-gutter">
        <div class="col-sm-4 no-padding">
            <div class="feature-box v2">
                <div class="featured-box-image">
                    <img src="http://placehold.it/640x480" alt="features" class="img-responsive">
                    <span><i class="fa fa-plus" aria-hidden="true"></i></span>
                </div>                      
                <div class="details">
                    <div class="hexagon"><span><i class="fa fa-user" aria-hidden="true"></i></span></div> <!-- end .hexagon -->
                    <h4>Lorem Ispum</h4>
                    <p class="sub-text">Lorem Ispum</p>
                    <p class="text">Lorem Ispum Lorem Ispum Lorem Ispum Lorem Ispum Lorem Ispum Lorem Ispum Lorem Ispum Lorem Ispum</p>
                </div> <!-- end .details -->
            </div> <!-- end .feature-box -->
        </div> <!-- end .col-sm-4 -->
    </div> <!-- end .row -->
</div> <!-- end .section -->

奥雷姆
Lorem Ispum

Lorem Ispum Lorem Ispum Lorem Ispum Lorem Ispum Lorem Ispum Lorem Ispum Ispum Lorem Ispum

提前谢谢

注意：已经在下面尝试了这个解决方案，但没有成功，因为我正在为三角形边框使用伪类。

---

我想这就是你需要的

干杯

函数resizeTriangle（）{
var wid=document.getElementById（'details'）.clientWidth/2；
var css='.feature-box.v2.详细信息：在{border left width:'+wid+'px；border right width:'+wid+'px；}'之前，
head=document.head | | document.getElementsByTagName（'head'）[0]，
style=document.createElement（'style'）；
style.type='text/css'；
style.id='myStyle'；
if（style.styleSheet）{
style.styleSheet.cssText=css；
}否则{
appendChild（document.createTextNode（css））；
}
如果（$（'style#myStyle'））{
$（'style#myStyle'）。删除（）；
}
//head.removeChild（document.getElementById（'myStyle'））
头。附属物（样式）；
}
$（窗口）。调整大小（函数（）{
resizeTriangle（）；
});
window.onload=函数（）{
resizeTriangle（）；
};
.col-sm-4{
保证金：0自动；
}
.功能盒{
-webkit转换：.3s；
过渡：.3s；
位置：相对位置；
溢出：隐藏；
}
.功能盒img{
宽度：100%；
}
.功能框：悬停。详细信息a{
底部：0；
边缘底部：49px；
}
.功能框。详细信息{
位置：绝对位置；
底部：0；
左：-1px；
填充：0 71px 0 33px；
宽度：93%；
溢出：隐藏；
z指数：2；
}
.功能框。详细信息：之后{
内容：“；
位置：绝对位置；
显示：块；
宽度：100%；
身高：100%；
排名：0；
左：0；
z指数：-2；
背景:#ff5534；
-webkit变换原点：右下角；
-ms变换原点：右下角；
变换原点：右下角；
-ms变换：倾斜（16度，0度）；
-webkit变换：倾斜（16度，0度）；
变换：倾斜（16度，0度）；
}
/*-----功能-v2-----*/
.feature-box.v2{
边框底部：1px实心#ccc；
}
.feature-box.v2.特色方框图像跨度{
位置：绝对位置；
内容：“；
排名：0；
左：0；
右：0；
底部：0；
背景:#ff5534；
不透明度：0；
-webkit转换：.3s；
过渡：.3s；
}
.feature-box.v2.详细信息：之后{
内容：无；
}
.feature-box.v2.详细信息{
左：0；
利润率：0.18px；
溢出：可见；
z指数：2；
背景#1f2730；
填充：0 50px；
宽度：自动；
}
.功能框.v2:悬停.详细信息p.text{
最大高度：999px；
边缘底部：35px；
颜色：#9b9fa3；
}
.feature box.v2：悬停。特征框图像范围{
不透明度：.9；
}
.功能框.v2:悬停。详细信息{
背景：#fff；
}
.feature box.v2:hover.details.highlight h4、.feature box.v2:hover.details h4{
颜色：#1f2730；
}
.功能框。v2:悬停。详细信息：之前{
边框底部：40px实心#ffffff；
}
.功能框.v2:悬停.六边形{
背景#1f2730；
}
.功能框.v2:悬停.六边形：前{
边框底部：17px实心#1f2730；
}
.功能框.v2:悬停.六边形：后{
边框顶部：17px实心#1f2730；
}
.feature-box.v2.详细信息p.sub-text{
文本转换：大写；
字体大小：14px；
字号：600；
边际上限：0；
颜色：#9b9fa3；
字体系列：“蒙特塞拉特”，无衬线；
}
.feature-box.v2.详细信息p.text{
最大高度：0；
页边距底部：0；
-webkit转换：.3s；
过渡：.3s；
}
.feature-box.v2.详细信息：之前{
内容：“；
位置：绝对位置；
宽度：100%；
左：0；
右：0；
顶部：-50px；
z指数：1；
高度：0px；
浮动：左；
左边框：184px实心透明；
右边框：184px实心透明；
边框底部：50px实心#1f2730；
}
.feature-box.v2.详细信息h4{
利润上限：35px；
利润底部：4倍；
}
@全部和全部介质（最大宽度：1200px）{
.feature-box.v2.详细信息{
填充顶部：24px；
垫底：35px；
位置：相对位置；
宽度：100%；
保证金：0；
}
.feature-box.v2.详细信息p.text{
最大高度：999px；
边缘底部：35px；
字体大小：16px；
}
.feature-box.v2.六边形{
显示：无；
}
}

奥雷姆
Lorem Ispum

Lorem Ispum Lorem Ispum Lorem Ispum Lorem Ispum Lorem Ispum Lorem Ispum Ispum Lorem Ispum
Stack Overflow具有内置的图像上载功能和内置的可运行代码段功能。为什么要链接到外部网站？你可以更好地使用一些SVG来制作这样的图形。这很有效。你这个男人。我还想知道上面的JS代码是否也适用于使用css3 transform skew和rotate属性创建的三角形边界。再次感谢。非常感谢。干杯