在透明底部边框的div顶部的CSS三角形

Question

嗨我在互联网上查了一遍，找不到答案。我怎样才能让透明边框的顶部的三角形？这看起来不太好。如果我可以删除底部边框，它会以箭头的方式呈现出漂亮的外观。我为此创建了一个小提琴。谢谢！

Check this fiddle

.hero_container{ 
    background: url('http://ekvira.in/wp-content/uploads/2013/08/blue-gradient-background-css-7110-1024x506.jpg'); 
    height: 300px; 
} 
.hero { 
    position: relative; 
    font-size: 18px; 
    line-height: 24px; 
    font-weight: lighter; 
    color: #ffffff; 
    position: relative; 
    border: 1px solid #ffffff; 
    max-width: 820px; 
    float: none; 
    margin: 30px auto auto auto; 
    padding-top: 30px; 
    padding-bottom: 30px; 
    border: 1px solid #000000; 
    color:black; 
    top: 50px; 
} 
.partners_hero_arrow_box:before { 
    height: 10px; 
    width: 10px; 
    position: absolute; 
    content: ''; 
    background: transparent; 
    border: 1px solid #000000; 
    border-top-width: 0px; 
    border-left-width: 0px; 
    transform: rotate(-135deg); 
    top: -6px; 
    left: calc(50% - 4px); 
} 

Answer 1

有了这个标记是不可能这样做的。 认识到这种设计是一种哈克。您需要在您的泡泡上设置border-top-color: transparent，并创建一个包含三个单独元素的顶部边框。使它们的包装占用全部宽度，例如使用flexbox将三角形部分与中心对齐，并分别为顶部边框片段建模。