5

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

введите сюда описание изображения

1
  • 2
    скорее это не бордер, а повторяющая картинка, на которой сверху фон. Но вообще это можно сделать на пример через repeating-linear-gradient
    – And
    12 мая 2018 в 1:13

2 ответа 2

9

Для тех кому интересно.

* {
	margin: 0px;
	padding: 0px;
}

.clearfix {
	content: '';
	display: table;
	clear: both;
}

.form__wrapper {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	width: 540px;
	height: 265px;
	margin: 0 auto;
	padding: 10px;
	background-color: #fff;
	border-radius: 10px;

	background-image: repeating-linear-gradient(135deg, #f02755 0px, #f02755 10px, 
																													 #fff 10px, #fff 20px, 
																													 #55a5d6 20px, #55a5d6 30px, 
																													 #fff 30px, #fff 40px);
}

.main-form {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	width: 100%;
	height: 100%;
	padding: 0 35px;
	padding-top: 33px;
	background-color: #fff;
	border-radius: 10px;
}

.main-form input {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	width: 163px;
	margin-bottom: 14px;
	padding: 10px 0;
	border: none;
	border-bottom: 1px solid #dedede;
	box-shadow: 0 1px 0 rgba(236, 236, 236, 1),
							inset 0 -1px 0 rgba(236, 236, 236, 1);
	text-transform: uppercase;
	color: #064f7a;
	outline: none
}

.main-inputs,
.secondary-inputs {
	width: 50%;
}

.main-inputs {
	float: left;
}

.secondary-inputs {
	float: right;
}

*::-webkit-input-placeholder {
	color: #064f7a;
	opacity: 1;
}

*:-moz-placeholder {
	color: #064f7a;
	opacity: 1;
}

*::-moz-placeholder {
	color: #064f7a;
	opacity: 1;
}

*:-ms-input-placeholder {
	color: #064f7a;
	opacity: 1;
}
<div class="form__wrapper">
	<form class="main-form clearfix">
		<div class="main-inputs">
			<input type="text" placeholder="Name">
			<input type="text" placeholder="Email">
			<input type="text" placeholder="Web">
		</div>
		<div class="secondary-inputs">
			<input type="text" placeholder="Message">
			<input type="text">
			<input type="text">
		</div>
	</form>
</div>

6
  • Ну полоски вы сделали, но тс явно спрашивал про такую обводку вокруг формы...
    – selya
    12 мая 2018 в 1:38
  • я и есть тс) мне интересен был сам результат, за border я уточнил просто
    – WVFFLIFE
    12 мая 2018 в 1:40
  • хахах, блин, и действительно) ну да, я не особо внимателен. А так - почему вариант с полосатой подложкой под формой не подходит?
    – selya
    12 мая 2018 в 1:41
  • в том то и дело что подходит, почему-то сперва взглянув на форму пришло в голову, что это border
    – WVFFLIFE
    12 мая 2018 в 1:42
  • 1
    stackoverflow.com/questions/28665159/…?
    – selya
    12 мая 2018 в 1:56
0

Для border можно задать изображение: http://css-live.ru/articles-css/razbiraemsya-s-border-image-iz-css3.html https://developer.mozilla.org/ru/docs/Web/CSS/CSS_Background_and_Borders/Border-image_generator

Поддерживается неплохо, не работает в IE10-: https://caniuse.com/#search=Border-image

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.