1

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

4
  • или же только картинкой самый оптимальный вариант?
    – max
    31 мая 2017 в 19:53
  • линии к блокам на чистом css не нарисовать. минимум задействовать придется js. максимум - svg или canvas 31 мая 2017 в 20:18
  • можете дать совет, что наиболее проще? может ссылку толковую подскажете?
    – max
    31 мая 2017 в 20:21
  • адаптивно .. не получится , для мобилок ваще без вариантов а на планшете это будет работать jsfiddle.net/Lensky/wchhnwdd
    – user33274
    1 июн 2017 в 5:59

2 ответа 2

3
  1. Верхний блок с двухцветной границей делается псевдоэлементами: они позиционируются под блоком, выдвигаются на нужное количество пикселей влево и вправо, их ширина вычисляемая. Благодаря таким махинациям границу можно анимировать при наведении, например, что недостижимо если просто поставить псевдоэлементам border.

  2. Линии к блокам сделаны на SVG. В полилайнах есть не очевидные магические числа 197 и 1003, они высчитаны по формуле ((ширина обертки − сумма промежутков между блоками) / количество блоков) / 2 = ((1200 - 20*2) / 3) / 2 = 193.333 (первая координата), 1200 - 193 = 1007 (вторая координата). Далее указываем правильный viewBox и смотрим результат.

body {
  overflow-x: hidden;
}

.top {
  text-align: center;
  margin-bottom: 5px;
}

button {
  background: #ccc;
  text-transform: uppercase;
  position: relative;
  padding: 15px 25px;
  border: none;
  font-weight: bold;
  font-family: sans-serif;
}

button:before,
button:after {
  position: absolute;
  content: ' ';
  left: -2px;
  top: -2px;
  width: calc(50% + 2px);
  height: calc(100% + 4px);
  background-color: royalblue;
  transition: transform .2s;
  transform-origin: 100% 100%;
  z-index: -1;
}

button:after {
  left: auto;
  right: -2px;
  background-color: tomato;
  will-change: transform;
  z-index: -1;
}

button:hover:after {
  transform: scaleX(2.01);
}

.lines {
  max-width: 1200px;
  margin: auto;
}

.lines polyline {
  stroke: grey;
}

.blocks {
  max-width: 1200px;
  margin: auto;
}

.blocks__inner {
  display: flex;
  justify-content: space-between;
  margin: 0 -10px;
}

.item {
  flex-grow: 1;
  margin: 0 10px;
  height: 100px;
  background: grey;
}
<div class="top">
  <button>Для кого этот курс</button>
</div>

<div class="lines">
  <svg viewBox="0 0 1200 150">
    <polyline points="600,0 193,150" />
    <polyline points="600,0 600,150" />
    <polyline points="600,0 1007,150" />
  </svg>
</div>

<div class="blocks">
  <div class="blocks__inner">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
  </div>
</div>

2
  • Спасибо большое !
    – max
    1 июн 2017 в 11:23
  • @max если все как надо, то отметьте этот ответ принятым. 1 июн 2017 в 12:23
0

Все можно сделать, но картинкой гораздо проще.

.wrap {
  width: 200px;
  height: 30px;
  background: #757575;
  position: relative;
}

.wrap div {
  position: absolute;
}

.inner {
  width: 196px;
  height: 26px;
  margin: 2px;
  background: #b3b3b3;
  font-family: verdana;
  font-size: 13px;
  line-height: 23px;
  text-align: center;
}

.left,
.right {
  width: 100px;
  height: 30px;
}

.left {
  background: black;
}

.right {
  background: royalblue;
  right: 0;
}
<div class="wrap">
  <div class="left"></div>
  <div class="right"></div>
  <div class="inner">ДЛЯ КОГО ЭТОТ КУРС</div>
  <div>

1
  • Думаю главное в этом вопросе всё же линии к блокам. А бордер сделать такой не проблема. Однако если линии делать не на css (а так и придется делать), то и бордер нет смысла на нём делать. 1 июн 2017 в 4:13

Ваш ответ

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

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