1

введите сюда описание изображенияПодскажите пожалуйста как такие бордеры сверстать? Пытался скопировать CSS но не получается никак...тут ссылка на пример

1 ответ 1

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>

3
  • Оказывается не совсем то что мне нужно) дело в том что у меня параллакс между секциями. Немогу добиться эффекта как тут - demo2.oceanplazatheme.com
    – pwnz22
    18 фев 2016 в 18:23
  • 1
    @pwnz22 Тогда так codepen.io/anon/pen/vLwXWb. На том сайте работает по такому же принципу. Но что-то нестандартное будет сложно построить (придется манипулировать before и after). 18 фев 2016 в 21:28
  • Большое спасибо, то что нужно) +адаптивность есть)
    – pwnz22
    18 фев 2016 в 22:15

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.