Есть какая-то возможность сверстать такой border или тут только перекрывать фон формой?
Ответ
Для тех кому интересно.
* {
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;
}
Комментариев нет:
Отправить комментарий