5

Всем здравствуйте! У меня такой вопрос, как лучше сверстать вот такой блок? Стрелки навигации, логотип и список рядом. Выглядит это более,менее сейчас, как на картинке. Но это внешняя красота :) Меня смущает, что вставлять картинки стрелок - это не очень хороший вариант. Можно ли их нарисовать на CSS? Или есть другие лучшие варианты? введите сюда описание изображения

Я это реализовала сейчас таким образом

HTML

<div class="logo_raion">
<img src="left_arrow0.png" style="margin-bottom:75px;"><img src="logo.jpg"><img src="right_arrow0.png" style="margin-bottom:75px;">
</div>
<ul class="raion_nav">
<li>Администрация</li>
<li>Документы</li>
<li>Правоохранительные органы</li>
<li>Здоровье</li>
<li>Образование</li>
<li>Торговые центры</li>
<li>Аварийные службы</li>
</ul>

CSS

.logo_raion {
   display: inline-block;
   margin-right: 30px;
   vertical-align: center; 
}
.raion_nav {
   display: inline-block;
   font-family: FRAMDCN;
   font-weight:400;
   font-size:2em; 
   padding: 25px 0 0 0;
}
.raion_nav li {
   margin-top: 15px;
}
1
  • Можно попробовать с помощью псевдоэлементов сделать, но мне кажется легче взять svg.
    – DarkSir
    7 мар 2017 в 8:44

4 ответа 4

3

Псевдоэлементы + трансформации + линейный градиент. Плюс метода в том, что размер стрелок надо менять в одном месте и не подгонять под новые размеры кучу свойств.

.content {
  display: inline-block;
  vertical-align: top;
  width: 200px;
}

.left,
.right {
  position: relative;
  width: 30px;
  height: 70px;
  display: inline-block;
  vertical-align: top;
}

.left:before,
.right:before,
.left:after,
.right:after {
  position: absolute;
  content: '';
  width: 40%;
  height: 50%;
  background-image: linear-gradient(to right, #ccc 0%,#ccc 15%,#fff 30%,#fff 70%,#ccc 85%,#ccc 100%);
  transform-origin: 0 0;
  transform: skewX(28deg);
}

.right:after {
  transform: skewX(-28deg);
  transform-origin: 100% 100%;
  top: 50%;
}

.left:before {
  transform-origin: 0 100%;
  transform: skewX(-28deg);
}

.left:after {
  top: 50%;
}
<div class=left></div>
<div class=content></div>
<div class=right></div>

7
  • о,спасибо большое! это очень крутой способ и, как мне показалось, наименее геморройный. Скажите пожалуйста, я во всем этом только разбираюсь, вы linear-gradient каким образом пишете? В смысле на глаз или это опыт знания его поведения? Прошу прощения, если вопрос звучит глупо.
    – Alla
    7 мар 2017 в 13:30
  • @Alla всё зависит от сложности, если это какой-нибудь не очевидный градиент, с которым еще надо поиграться, то удобно воспользоваться генератором (colorzilla.com/gradient-editor). конкретно этот вначале составил руками, но оказалось, что при трансформации границы слишком резкие и пришлось немного подогнать через девтулс. 7 мар 2017 в 13:38
  • а если я хочу сделать эти стрелки кликабельные, то ссылку нужно вставлять внутри блока <div class=left></div>?
    – Alla
    7 мар 2017 в 15:05
  • @Alla не, поменяйте дивы на ссылки и добавьте им свойство display: block. 7 мар 2017 в 15:19
  • 1
    Это не стрелки слайдера, эти стрелки именно что ведут на другую страницу, поэтому <a> здесь отлично вписывается )
    – Alla
    10 мар 2017 в 8:35
2

Берем такой SVG:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="-2 -2 22 44" width="20" height="40">
      <path
         d="M 10,0 0,20 10,40"
         style="fill:none;fill-rule:evenodd;stroke:#CCCCCC;stroke-width:2;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" />
      <path
         d="M 20,0 10,20 20,40"
         style="fill:none;fill-rule:evenodd;stroke:#CCCCCC;stroke-width:2;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" />
</svg>

Его можно нарисовать в векторном редакторе, например, Inkscape. Но я выпилил лишние теги из него.

Затем пропускаем его через encodeURI, например:

console.log(encodeURI('<svg   xmlns="http://www.w3.org/2000/svg"   viewBox="-2 -2 22 44" width="20" height="40"><path d="M 10,0 0,20 10,40" style="fill:none;fill-rule:evenodd;stroke:#CCCCCC;stroke-width:2;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" /><path d="M 20,0 10,20 20,40"    style="fill:none;fill-rule:evenodd;stroke:#CCCCCC;stroke-width:2;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" /></svg>'))

Полученное можно поместить в CSS:

 background: url('data:image/svg+xml,[код картинки]')

Результат:

.arrow {
  background: url('data:image/svg+xml,%3Csvg%20%20%20xmlns=%22http://www.w3.org/2000/svg%22%20%20%20viewBox=%22-2%20-2%2022%2044%22%20width=%2220%22%20height=%2240%22%3E%3Cpath%20d=%22M%2010,0%200,20%2010,40%22%20style=%22fill:none;fill-rule:evenodd;stroke:#CCCCCC;stroke-width:2;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1%22%20/%3E%3Cpath%20d=%22M%2020,0%2010,20%2020,40%22%20%20%20%20style=%22fill:none;fill-rule:evenodd;stroke:#CCCCCC;stroke-width:2;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1%22%20/%3E%3C/svg%3E');
  width: 20px;
  height: 40px;
}
<div class=arrow></div>

1
  • о таком варианте я еще не подозревала, над ним я буду разбираться в выходные ) Спасибо большое!
    – Alla
    7 мар 2017 в 13:33
2

Если чуть подправить углы - можно и так:

div {
  position: relative;
  top: 50px;
  left: 50px;
}
div:before { position: absolute; content: ""; left: 0; top: 0; background: rgb(235,235,235); width: 2px; height: 30px;
-webkit-transform: skewX(-33deg);
   -moz-transform: skewX(-33deg);
    -ms-transform: skewX(-33deg);
     -o-transform: skewX(-33deg);
        transform: skewX(-33deg); }
div:after  { position: absolute; content: ""; left: 0; top: -30px; background: rgb(235,235,235); width: 2px; height: 30px;
-webkit-transform: skewX(33deg);
   -moz-transform: skewX(33deg);
    -ms-transform: skewX(33deg);
     -o-transform: skewX(33deg);
        transform: skewX(33deg); }
        
.cover {
  position: relative;
  left: 40px;
}
<div></div>
<div class='cover'></div>

1
  • Спасибо большое! Я возьму себе на вооружение этот вариант. Мне кажется, что это точно лучше, чем вставленные у меня ранее png )
    – Alla
    7 мар 2017 в 13:32
2

Можно поиграться с трансформациями:

body {
  padding: 20px;
}

div {
  border: 1px solid gray;
  border-bottom: none;
}

#parent {
  width: 40px;
  heigth: 40px;
  transform: rotate(45deg) skew(20deg, 20deg);
  border-left: none;
}

#child {
  width: 30px;
  height: 30px;
  margin-left: 3px;
  margin-top: 5px;
  transform: rotate(90deg);
  border-right: none;
}
<div id="parent">
  <div id="child"></div>
</div>

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

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