上部に反応する三角形の境界を作る方法

Question

三角形の境界線を反応させようとしています。以下は、codepenへの直接リンクです。白い詳細ボックスの真上に境界線が表示されます。スクリーンショット - 事前に

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

感謝。

注：私は三角形の境界線のために擬似クラスを使用しているので、これはすでに以下の解決策を試しましたが、機能しませんでした。 Creating responsive triangles with CSS

Answer 1

私はこれがあなたが必要としていると思います。

乾杯！

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