Есть какая-то возможность сверстать такой border или тут только перекрывать фон формой?
2 ответа
Для тех кому интересно.
* {
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>
-
Ну полоски вы сделали, но тс явно спрашивал про такую обводку вокруг формы...– selyaCommented 12 мая 2018 в 1:38
-
я и есть тс) мне интересен был сам результат, за border я уточнил просто– WVFFLIFECommented 12 мая 2018 в 1:40
-
хахах, блин, и действительно) ну да, я не особо внимателен. А так - почему вариант с полосатой подложкой под формой не подходит?– selyaCommented 12 мая 2018 в 1:41
-
в том то и дело что подходит, почему-то сперва взглянув на форму пришло в голову, что это border– WVFFLIFECommented 12 мая 2018 в 1:42
-
1
Для 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
repeating-linear-gradient