5

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

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

1
  • 2
    скорее это не бордер, а повторяющая картинка, на которой сверху фон. Но вообще это можно сделать на пример через repeating-linear-gradient
    – And
    Commented 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
    Commented 12 мая 2018 в 1:38
  • я и есть тс) мне интересен был сам результат, за border я уточнил просто
    – WVFFLIFE
    Commented 12 мая 2018 в 1:40
  • хахах, блин, и действительно) ну да, я не особо внимателен. А так - почему вариант с полосатой подложкой под формой не подходит?
    – selya
    Commented 12 мая 2018 в 1:41
  • в том то и дело что подходит, почему-то сперва взглянув на форму пришло в голову, что это border
    – WVFFLIFE
    Commented 12 мая 2018 в 1:42
  • 1
    stackoverflow.com/questions/28665159/…?
    – selya
    Commented 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

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

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