Wie man die Dreiecksgrenze auf der Oberseite anspricht

Question

Versuch, die Dreiecksgrenze ansprechend zu machen. Unten ist der direkte Link zu Codepen. Sie können den Rahmen direkt über dem weißen Detailfeld sehen. Screenshot -

<!-- 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 --> 

http://codepen.io/anon/pen/jBVVNo

Vielen Dank im Voraus.

Hinweis: Bereits versucht diese Lösung unten, aber es hat nicht funktioniert, da ich Pseudoklasse für Dreiecksgrenze verwenden. Creating responsive triangles with CSS

Answer 1

Ich denke, das ist, was Sie brauchen.

Prost!

function resizeTriangle() { 
 
    var wid = document.getElementById('details').clientWidth/2; 
 
    var css = '.feature-box.v2 .details:before {border-left-width: ' + wid + 'px;border-right-width: ' + wid + 'px;}', 
 
\t head = document.head || document.getElementsByTagName('head')[0], 
 
\t style = document.createElement('style'); 
 

 
    style.type = 'text/css'; 
 
    style.id = 'myStyle'; 
 
    if (style.styleSheet) { 
 
\t style.styleSheet.cssText = css; 
 
    } else { 
 
\t style.appendChild(document.createTextNode(css)); 
 
    } 
 
    if ($('style#myStyle')) { 
 
\t $('style#myStyle').remove(); 
 
    } 
 
    //head.removeChild(document.getElementById('myStyle')) 
 
    head.appendChild(style); 
 
} 
 
$(window).resize(function() { 
 
    resizeTriangle(); 
 
}); 
 
window.onload = function() { 
 
    resizeTriangle(); 
 
};

.col-sm-4 { 
 
    margin: 0 auto; 
 
} 
 
.feature-box { 
 
    -webkit-transition: .3s; 
 
    transition: .3s; 
 
    position: relative; 
 
    overflow: hidden; 
 
} 
 
.feature-box img { 
 
\t width: 100%; 
 
} 
 
.feature-box:hover .details a { 
 
\t bottom: 0; 
 
\t margin-bottom: 49px; 
 
} 
 
.feature-box .details { 
 
    position: absolute; 
 
    bottom: 0; 
 
    left: -1px; 
 
    padding: 0 71px 0 33px; 
 
    width: 93%; 
 
    overflow: hidden; 
 
    z-index: 2; 
 
} 
 
.feature-box .details:after { 
 
    content: " "; 
 
    position: absolute; 
 
    display: block; 
 
    width: 100%; 
 
    height: 100%; 
 
    top: 0; 
 
    left: 0; 
 
    z-index: -2; 
 
    background: #ff5534; 
 
    -webkit-transform-origin: bottom right; 
 
    -ms-transform-origin: bottom right; 
 
    transform-origin: bottom right; 
 
    -ms-transform: skew(16deg, 0deg); 
 
    -webkit-transform: skew(16deg, 0deg); 
 
    transform: skew(16deg, 0deg); 
 
} 
 

 
/*-----Features-v2-----*/ 
 
.feature-box.v2 { 
 
    border-bottom: 1px solid #ccc; \t 
 
} 
 
.feature-box.v2 .featured-box-image span { 
 
\t position: absolute; 
 
\t content: ""; 
 
\t top: 0; 
 
\t left: 0; 
 
\t right: 0; 
 
\t bottom: 0; 
 
\t background: #ff5534; 
 
\t opacity: 0; 
 
\t -webkit-transition: .3s; 
 
\t transition: .3s; 
 
} 
 

 
.feature-box.v2 .details:after { 
 
\t content: none; 
 
} 
 
.feature-box.v2 .details { 
 
    left: 0; 
 
    margin: 0 18px; 
 
    overflow: visible; 
 
    z-index: 2; 
 
    background: #1f2730; 
 
    padding: 0 50px; 
 
    width: auto; 
 
} 
 
.feature-box.v2:hover .details p.text { 
 
\t max-height: 999px; 
 
\t margin-bottom: 35px; 
 
    color: #9b9fa3; 
 
} 
 
.feature-box.v2:hover .featured-box-image span { 
 
\t opacity: .9; 
 
} 
 
.feature-box.v2:hover .details { 
 
\t background: #fff; \t 
 
} 
 
.feature-box.v2:hover .details.highlight h4, .feature-box.v2:hover .details h4 { 
 
    color: #1f2730; 
 
} 
 
.feature-box.v2:hover .details:before { 
 
    border-bottom: 40px solid #ffffff; \t 
 
} 
 
.feature-box.v2:hover .hexagon { 
 
\t background: #1f2730; 
 
} 
 
.feature-box.v2:hover .hexagon:before { 
 
\t border-bottom: 17px solid #1f2730; 
 
} 
 
.feature-box.v2:hover .hexagon:after { 
 
\t border-top: 17px solid #1f2730; 
 
} 
 
.feature-box.v2 .details p.sub-text { 
 
\t text-transform: uppercase; 
 
\t font-size: 14px; 
 
\t font-weight: 600; 
 
\t margin-top: 0; 
 
\t color: #9b9fa3; 
 
\t font-family: 'Montserrat', sans-serif; 
 
} 
 
.feature-box.v2 .details p.text { 
 
    max-height: 0; 
 
    margin-bottom: 0; 
 
    -webkit-transition: .3s; 
 
    transition: .3s; 
 
} 
 
.feature-box.v2 .details:before { 
 
\t content: ""; 
 
    position: absolute; 
 
    width: 100%; 
 
    left: 0; 
 
    right: 0; 
 
    top: -50px; 
 
    z-index: 1; 
 
    height: 0px; 
 
    float: left; 
 
    border-left: 184px solid transparent; 
 
    border-right: 184px solid transparent; 
 
    border-bottom: 50px solid #1f2730; 
 
} 
 
.feature-box.v2 .details h4 { 
 
    margin-top: 35px; 
 
    margin-bottom: 4px; 
 
} 
 
@media all and (max-width: 1200px) { 
 
\t .feature-box.v2 .details { 
 
\t \t padding-top: 24px; 
 
\t \t padding-bottom: 35px; 
 
\t \t position: relative; 
 
\t \t width: 100%; 
 
\t \t margin: 0; 
 
\t } 
 
\t .feature-box.v2 .details p.text { 
 
\t \t max-height: 999px; 
 
\t \t margin-bottom: 35px; 
 
\t \t font-size: 16px; 
 
\t } 
 
\t .feature-box.v2 .hexagon { 
 
\t \t display: none; 
 
\t } 
 

 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/> 
 
\t \t <!-- Features --> 
 
\t \t <div class="section text-center"> 
 
\t \t \t <div class="row no-gutter"> 
 
\t \t \t \t <div class="col-sm-4 no-padding"> 
 
\t \t \t \t \t <div class="feature-box v2"> 
 
\t \t \t \t \t \t <div class="featured-box-image"> 
 
\t \t \t \t \t \t \t <img src="http://placehold.it/640x480" alt="features" class="img-responsive"> 
 
\t \t \t \t \t \t \t <span><i class="fa fa-plus" aria-hidden="true"></i></span> 
 
\t \t \t \t \t \t </div> \t \t \t \t \t \t 
 
\t \t \t \t \t \t <div class="details" id="details"> 
 
\t \t \t \t \t \t \t <div class="hexagon"><span><i class="fa fa-user" aria-hidden="true"></i></span></div> <!-- end .hexagon --> 
 
\t \t \t \t \t \t \t <h4>Lorem Ispum</h4> 
 
\t \t \t \t \t \t \t <p class="sub-text">Lorem Ispum</p> 
 
\t \t \t \t \t \t \t <p class="text">Lorem Ispum Lorem Ispum Lorem Ispum Lorem Ispum Lorem Ispum Lorem Ispum Lorem Ispum Lorem Ispum</p> 
 
\t \t \t \t \t \t </div> <!-- end .details --> 
 
\t \t \t \t \t </div> <!-- end .feature-box --> 
 
\t \t \t \t </div> <!-- end .col-sm-4 --> 
 
\t \t \t </div> <!-- end .row --> 
 
\t \t </div> <!-- end .section -->