1 Востаннє редагувалося Bygryn (08.08.2015 18:53:40)

Тема: Як реалізувати похилий перехід між секціями?

Доброго дня, як можна реалізувати такий перехід між секціями, як зображено на картинці?

Post's attachments

Без-имени-1.png 42.54 kb, 308 downloads since 2015-08-08 

2 Востаннє редагувалося BarsicPlus (08.08.2015 20:05:36)

Re: Як реалізувати похилий перехід між секціями?

Bygryn написав:

Доброго дня, як можна реалізувати такий перехід між секціями, як зображено на картинці?

Такі речі робити найкраще з допомогою svg.
А взагалі, "перехід" той можна реалізувати просто окремими елементами: лінійними дівами, які будуть чергуватися сірий - синій - сірий. Як на мене, це все дуже просто. В чому виникає проблема ?))

3

Re: Як реалізувати похилий перехід між секціями?

Ви трохи не так зрозуміли, ось кращий приклад:

Post's attachments

img.png 13.65 kb, 244 downloads since 2015-08-08 

4

Re: Як реалізувати похилий перехід між секціями?

Bygryn написав:

Ви трохи не так зрозуміли, ось кращий приклад:

Мається на увазі, як реалізувати такий вот трикутник ?

5

Re: Як реалізувати похилий перехід між секціями?

BarsicPlus написав:
Bygryn написав:

Ви трохи не так зрозуміли, ось кращий приклад:

Мається на увазі, як реалізувати такий вот трикутник ?

Саме так

6

Re: Як реалізувати похилий перехід між секціями?

Саме простіше - намалювати в SVG.
Саме не простіше, вивчити каскадну таблицю стилів)
Стаття по шейпам в CSS вам в допомогу: https://css-tricks.com/examples/ShapesOfCSS/
Там можна глянути як зробити такі обєкти. Рекомендую добре з цим розібратися, щоби надалі проблем з цим не виникало.

Подякували: Bygryn, 221VOLT2

7

Re: Як реалізувати похилий перехід між секціями?

BarsicPlus написав:

Саме простіше - намалювати в SVG.
Саме не простіше, вивчити каскадну таблицю стилів)
Стаття по шейпам в CSS вам в допомогу: https://css-tricks.com/examples/ShapesOfCSS/
Там можна глянути як зробити такі обєкти. Рекомендую добре з цим розібратися, щоби надалі проблем з цим не виникало.

Дуже дякую.

8

Re: Як реалізувати похилий перехід між секціями?

Поставити картинкою на задньому фоні.

9

Re: Як реалізувати похилий перехід між секціями?

skew юзай ;)