Hello everybody! I have such a question, how is it better to impose such a block? Navigation arrows, logo and list nearby. It looks more, less now, as in the picture. But this is external beauty :) I am confused that inserting pictures of arrows is not a very good option. Can I draw them on CSS? Or are there other better options? enter image description here

I implemented it now this way.

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; }
  • You can try using pseudo-elements to do it, but it seems to me easier to take svg. - DarkSir

4 answers 4

Pseudo-elements + transformations + linear gradient. A plus method is that the size of the arrows must be changed in one place and not a lot of properties adjusted to the new dimensions.

 .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>

  • Oh, thank you very much! This is a very cool way and, as it seemed to me, the least hemorrhoids. Tell me please, I just understand all this, how do you write a linear-gradient? In terms of eye or is it the experience of knowing his behavior? I apologize if the question sounds stupid. - Alla
  • @Alla it all depends on the complexity, if this is some kind of non-obvious gradient that you still have to play with, then it’s convenient to use a generator ( colorzilla.com/gradient-editor ). This one was originally made up by hands, but it turned out that when transforming the boundaries, they were too sharp and had to be adjusted a bit through devtuls. - Sasha Omelchenko
  • and if I want to make these arrows clickable, then the link needs to be inserted inside the <div class = left> </ div> block? - Alla
  • @Alla no, swap divs for links and add display: block property to them. - Sasha Omelchenko
  • one
    These are not slider arrows, these arrows are what lead to another page, so <a> it fits in perfectly here) - Alla

Take this 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>

You can draw it in a vector editor, such as Inkscape. But I cut the extra tags out of it.

Then we pass it through encodeURI, for example:

 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>'))

The resulting can be put in CSS:

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

Result:

 .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>

  • I didn’t suspect such an option, I’ll understand it at the weekend) Thank you very much! - Alla

If you tweak the corners a bit, you can do this:

 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>

  • Thank you very much! I will adopt this option. It seems to me that this is definitely better than the ones I had previously inserted png) - Alla

You can play around with the transformations:

 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>