Javascript-форум (https://javascript.ru/forum/)
-   (X)HTML/CSS (https://javascript.ru/forum/xhtml-html-css/)
-   -   Подскажите как сделать фон (бутстрап) (https://javascript.ru/forum/xhtml-html-css/78467-podskazhite-kak-sdelat-fon-butstrap.html)

bohdan_a 18.09.2019 10:25

Подскажите как сделать фон (бутстрап)
 
Подскажите, пожалуйста, как сдеалать бекграунд как в разделе 'stay in touch' с помощью бутстрапа??

https://www.figma.com/file/cFDh3T5KC...ode-id=1%3A731

Malleys 18.09.2019 13:58

<html>
	<head>
		<style>

html, body {
	display: flex;
	flex-direction: column;
	margin: 0;
	height: 100%;
	overflow: auto;
}

footer {
	background: rgb(41, 47, 66);
	background-clip: padding-box;
	border-top: 200px solid rgba(0, 0, 0, 0);
	border-image: linear-gradient(297.2deg, rgb(134, 190, 38), rgb(196, 229, 139)) 50;
	border-image: url('data:image/svg+xml,<svg width="16" height="16" viewBox="0 0 100 100" fill="none" \
		xmlns="http://www.w3.org/2000/svg">\
		<defs>\
			<linearGradient id="grad" x1="100%" y1="0%" x2="0%" y2="0%">\
				<stop offset="0%" style="stop-color:rgb(134, 190, 38);stop-opacity:1" />\
				<stop offset="100%" style="stop-color:rgb(196, 229, 139);stop-opacity:1" />\
			</linearGradient>\
		</defs>\
		<path d="M 0 0 Q 10 60 50 59 Q 90 50 100 90 V 100 H 0 z" fill="url(%23grad)"/>\
		<path d="M 0 10 Q 10 60 50 60 Q 90 60 100 100 H 0 z" fill="rgb(41, 47, 66)"/>\
	</svg>');
	border-image-slice: 100% 0 0 0 fill;
	border-image-width: 200px 0 0 0;
	border-image-outset: 0;
	border-image-repeat: stretch round;
	padding: 1em;
	color: white;
}

main {
	flex: 1;
}

		</style>
	</head>
	<body>
		<header></header>
		<main></main>
		<footer>Stay in touch</footer>
	</body>
</html>


Часовой пояс GMT +3, время: 14:47.