Верстка блока и рисование на CSS

#html #css #вёрстка

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


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

HTML





Администрация
Документы
Правоохранительные органы
Здоровье
Образование
Торговые центры
Аварийные службы



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

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



.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%;
}





Ответ 2

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








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

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



console.log(encodeURI(''))




Полученное можно поместить в 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;
}



Ответ 3

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



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;
}




Ответ 4

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



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;
}