How to make triangle border responsive on top side

Question

Trying to make Triangle border responsive. Below is the direct link to codepen. You can see the border just above the white details box . Screenshot -

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

Thanks in advance.

Note: Already tried this below solution but it didn't work since I'm using pseudo class for triangle border. Creating responsive triangles with CSS

Stack Overflow has both a built-in image upload feature and a built-in runnable snippets feature. Why link to external sites? — Jordan Running, Mar 07 '17 at 18:25

Himanshu Aggarwal · Accepted Answer · 2017-03-07T19:31:08.640

I think this is what you needed.

Cheers!

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;}',
 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;
  } else {
 style.appendChild(document.createTextNode(css));
  }
  if ($('style#myStyle')) {
 $('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 {
 width: 100%;
}
.feature-box:hover .details a {
 bottom: 0;
 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; 
}
.feature-box.v2 .featured-box-image span {
 position: absolute;
 content: "";
 top: 0;
 left: 0;
 right: 0;
 bottom: 0;
 background: #ff5534;
 opacity: 0;
 -webkit-transition: .3s;
 transition: .3s;
}

.feature-box.v2 .details:after {
 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 {
 max-height: 999px;
 margin-bottom: 35px;
    color: #9b9fa3;
}
.feature-box.v2:hover .featured-box-image span {
 opacity: .9;
}
.feature-box.v2:hover .details {
 background: #fff; 
}
.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; 
}
.feature-box.v2:hover .hexagon {
 background: #1f2730;
}
.feature-box.v2:hover .hexagon:before {
 border-bottom: 17px solid #1f2730;
}
.feature-box.v2:hover .hexagon:after {
 border-top: 17px solid #1f2730;
}
.feature-box.v2 .details p.sub-text {
 text-transform: uppercase;
 font-size: 14px;
 font-weight: 600;
 margin-top: 0;
 color: #9b9fa3;
 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 {
 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) {
 .feature-box.v2 .details {
  padding-top: 24px;
  padding-bottom: 35px;
  position: relative;
  width: 100%;
  margin: 0;
 }
 .feature-box.v2 .details p.text {
  max-height: 999px;
  margin-bottom: 35px;
  font-size: 16px;
 }
 .feature-box.v2 .hexagon {
  display: none;
 }

}

<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"/>
  <!-- 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" id="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 -->

It worked. You da man. Also I was wondering if above JS code would work for Triangle border that has been created using css3 transform skew and rotate properties as well. For eg. http://codepen.io/anon/pen/gmLEON Thanks again. Really appreciated. Cheers! — zxc123, Mar 08 '17 at 09:35

How to make triangle border responsive on top side

1 Answers1