Jump to content
  • 0
Sign in to follow this  
Андрей Дроботин

Кривые и косые линии между блоками

Question

Здравствуйте, подскажите пожалуйста как сделать лини между блокаками как на примере Здесь ссылка, но видят ее только участники клуба. Вступите в клуб по этой ссылке.. Я делал в фотошопе Здесь ссылка, но видят ее только участники клуба. Вступите в клуб по этой ссылке. но вверху образуется какая то полоса. можно ли ее убрать. либо есть другой способ как их создавать, может виджет нужен? спасибо

Share this post


Link to post

6 answers to this question

Recommended Posts

Новая статья

Как бесплатно получить специализированный хостинг для Adobe Muse сайта. Читайте новую инструкцию по этой ссылке.
  • 0
В 14.04.2017 в 19:16, Андрей Дроботин сказал:

Спасибо , просто сомневался, правильно ли я делаю это с помошью фотошопа, думал что есть другие более лучшие способы

на сам деле есть.. но там такие шаманские пляски..

Здесь ссылка, но видят ее только участники клуба. Вступите в клуб по этой ссылке.  вот например 

впрочем там основная проблема нарисовать пятиугольник

Share this post


Link to post
  • 0

пример во вложении но он жестко привязан к размеру картинки  - или придется все переписывать под новый размер  

размер фона 640x404 можно по высоте уменьшить до 300 не критично

Здесь ссылка, но видят ее только участники клуба. Вступите в клуб по этой ссылке.

как использовать в muse - поменять расширение на svg и вставить на всю  ширину . профит. картинку ложим в корень - или прописываем где оно у вас будет лежать

Share this post


Link to post
  • 0
10 минут назад, Павел Хомерики сказал:

Во намудрили. А если растягивать по ширине браузера?

растягивается

можно поступить альтернативно - объект- вставка html


<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 640 404" id="svg1"> 
<pattern id="img1" width="640" height="404"
         patternUnits="userSpaceOnUse">
  <!-- Внутрь вставляется картинка для фона -->
  <image xlink:href="assets/2dcf92982f9b.jpg"  width="640" height="404" center bottom>
</pattern>

<style>
 svg * {
            transition: fill .1s ease-out, opacity .1s ease-out;     
  fill: url(#img1);
        
	  
	   }

</style>
  <path onclick="location.href='http://google.com'" id="shape-twitter" d="M 0 150 L 320 00 L 640 150 L 640 300  L 00 300 z"  />
  
</svg>

очень важно чтобы картинка была указаного размера. если будет не такая - возможны траблы

также возможны проблемы при наличии нескольких svg 

Share this post


Link to post
Sign in to follow this  

×
×
  • Create New...