Разделить веб-страницу по диагонали - PullRequest
Новая
       0

Разделить веб-страницу по диагонали

0 голосов
/ 01 октября 2018

введите описание изображения здесь Я начинающий и ищу помощь.Я хочу разделить веб-страницу по диагонали.Могу ли я сделать это исключительно с помощью HTML и CSS?пожалуйста, скажите мне несколько предложений.

1 Ответ

0 голосов
/ 01 октября 2018

Вы можете использовать атрибут CSS clip-path.

В вашем случае я бы использовал атрибут: 

clip-path: polygon();

.Этот атрибут позволяет вам определить, насколько оттянутый угол может быть в элементах.В этом случае я использовал два элемента div и вытащил их соответствующие углы назад, чтобы они выглядели по диагонали.

Использование 

calc();

в моем CSS позволило мне вычислить окончательное значение, используя процент иvh (высота области просмотра), и это делает его таким, чтобы различные соотношения сторон экрана не влияли на перекос диагональной линии.

Когда вы используете clip-path, он буквально обрезает фрагмент вашего элемента div.Это означает, что текст будет обрезан.Чтобы исправить это, я добавил отступ слева и справа от соответствующих элементов div, чтобы вставить содержимое.

Кроме того, поля элементов остаются прямоугольными.Таким образом, вы вырезаете куски, но это может создать диагональный разрыв между элементами.Итак, чтобы соединить элементы, я вычел отступы.

Наконец, clip-path также обрезает границы.Таким образом, чтобы создать оранжевую линию, я использовал обертку div и установил ее цвет фона.Я также держал поля достаточно маленькими, чтобы оставить зазор между обоими элементами div.

В фрагменте кода я мог случайно ошибочно расставить диагональный разрез ... ой, о, хорошо!Просто измените значения на что-то другое в свойстве clip-path.:)

Посмотрите. 

body{
		margin: 0;
		font-size: 2em;
	}

	#landing-area{
		width: 100vw;
		height: 100vh;
		display: flex;
		background-color: #F46835;
	}

	#box-left{
		width: 50%;
		clip-path: polygon(0 0, calc(100% - 10vh) 0, 100% 100%, 0 100%);
		-webkit-clip-path: polygon(0 0, calc(100% - 10vh) 0, 100% 100%, 0 100%);
		margin-right: -4.2vh;
		padding: 5px 11vh 5px 5px;
		background-color: #F4FCFF;
		text-align: center;
	}
	#box-right{
		width: 50%;
		clip-path: polygon(0 0, 100% 0, 100% 100%, calc(0% + 10vh) 100%);
		-webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, calc(0% + 10vh) 100%);
		margin-left: -4.2vh;
		padding: 5px 5px 5px 11vh;
		background-color: #44325A;
		text-align: center;
	}
<body>
	<div id="landing-area">
		<div id="box-left">
			Box 1!
		</div>
		<div id="box-right">
			Box 2!
		</div>
	</div>
</body>
...