Подскажите пожалуйста как такие бордеры сверстать? Пытался скопировать CSS но не получается никак...тут ссылка на пример
1 ответ
Можно использовать svg, как в примере ниже. Если интересно, то вот ссылка на codrops: http://tympanus.net/codrops/2013/10/03/a-collection-of-separator-styles/
/* Big Triangle */
svg#bigTriangleColor {
pointer-events: none;
}
#bigTriangleColor path {
fill: #3498db;
stroke: #3498db;
stroke-width: 2;
}
<svg id="bigTriangleColor" xmlns="http://www.w3.org/2000/svg" version="1.1" width="100%" height="100" viewBox="0 0 100 102" preserveAspectRatio="none">
<path d="M0 0 L50 100 L100 0 Z"></path>
</svg>
Update #1
Второй способ с помощью JQuery:
$(document).ready(function() {
function border_width() {
var w = $(window).width() / 2;
$('.header-border-bot').css('border-left-width', w);
$('.header-border-bot').css('border-right-width', w);
}
$(window).on('load resize', function () {
border_width();
});
});
body {
background: blue;
width: 100%;
margin: 0;
}
.container {
width: 100%;
}
.header {
background: #fff;
height: 100px;
width: 100%;
position: fixed;
top: 0px;
z-index: 1000;
}
.header-border-bot {
position: absolute;
bottom: -29px;
left: 0px;
content: "";
width: 0px;
height: 0px;
border-style: solid dashed;
border-width: 30px 960px 0px;
border-color: #fff transparent transparent;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="header">
<div class="header-border-bot">
</div>
</div>
</div>
-
Оказывается не совсем то что мне нужно) дело в том что у меня параллакс между секциями. Немогу добиться эффекта как тут - demo2.oceanplazatheme.com– pwnz2218 фев 2016 в 18:23
-
1@pwnz22 Тогда так codepen.io/anon/pen/vLwXWb. На том сайте работает по такому же принципу. Но что-то нестандартное будет сложно построить (придется манипулировать before и after). 18 фев 2016 в 21:28
-