4
試圖使三角形邊框響應。以下是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
堆棧溢出同時具有內置的圖片上傳功能,並內置了可運行的代碼片段功能。爲什麼要鏈接到外部網站? –
您可以更好地使用這些圖形的一些SVG。 –