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>

Ваш ответ

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

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