0

Подскажите каким образом создать данный элемент, чтобы он был адаптивен? Первое как пробовал его оформить это путем трансформа дива и псевдокласс бефо, однако из за абсолютного позиционирования идут разлеты между формой и этим так называемым бордером.


скрин

4
  • 1
    А где код? Что бы дать внятный ответ, надо иметь представления, как он был реализован...
    – Air
    7 дек 2017 в 20:23
  • А форма position:absolute ?
    – Kirill
    7 дек 2017 в 21:03
  • Да реализован был через абсолют
    – Kr1on1x
    7 дек 2017 в 21:44
  • Кода нет, так как не считаю его правильным, его не просто нужно править а написать нормально.
    – Kr1on1x
    7 дек 2017 в 21:45

1 ответ 1

0

#form{
    width: fit-content;
    padding: 10px;
    background-color: red;
    position: absolute;
    top: 10%;
}
#form input{
    width: 100%;
    height: 50px;
    margin: 0 0 10px;
}
#form:before{
    content: '';
    width: 30px;
    height: 103%;
    background-color: darkred;
    display: block;
    position: absolute;
    left: -30px;
    top: -6px;
    transform: skewX(15deg) rotate(15deg);
}
<div style="float:left;width:10%;height:200px;background-color:gray"></div>
<div style="float:left;width:90%;height:200px;background-color:lightgray">
    <form id="form">
        <input type="text"/>
        <input type="text"/>
    </form>
</div>

1
  • Большое спасибо помог)
    – Kr1on1x
    8 дек 2017 в 13:58

Ваш ответ

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

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