如何在顶边对三角边框做出响应

Question

尝试使Triangle边界响应。以下是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

我认为这就是你所需要的。

干杯！

＆＃13;

＆＃13;

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();
};

＆＃13;

.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;
	}

}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;