1. Уважаемые пользователи, прежде чем ответить в теме или создать новую, внимательно ознакомьтесь с Правилами раздела
    Скрыть объявление

[Помогите] Уголки по разным углам для div или p

Тема в разделе "Вёрстка (HTML, CSS)", создана пользователем AlexGood, 28 ноя 2016.

  1. AlexGood

    AlexGood

    Регистрация:
    28 ноя 2016
    Сообщения:
    254
    Симпатии:
    7
    Подскажите как правильно делаются уголки для блока по разным углам. Извиняюсь за тофтологию, вот образец: http://joxi.ru/VrwlOggIKBDYvm
     
  2. iga

    iga

    Регистрация:
    6 фев 2014
    Сообщения:
    285
    Симпатии:
    53
    Я бы попробовал для дива с контентом задать псевдоэлементы before и after(или просто ещё два дива). И их уже покрутить с помощью transform.
     
    AlexGood нравится это.
  3. AlexGood

    AlexGood

    Регистрация:
    28 ноя 2016
    Сообщения:
    254
    Симпатии:
    7
    Ну попробовать можно. А как ему предать неправильную форму?
     
  4. iga

    iga

    Регистрация:
    6 фев 2014
    Сообщения:
    285
    Симпатии:
    53
    Это-то не беда transform: skewX(-10deg);
    А вот не могу сообразить как эстетично скрыть оставшиеся части этого скрученного прямоугольника.

    Ну короче вот какая-то такая чуда-юда получилась.
    HTML:
    <div class="before-block"></div>
    <div class="text"></div>
    <div class="after-block"></div>
    
    .text {
        background: blue;
        width: 300px;
        height: 100px;
        float: left;
    }
    .before-block {
        content: "до";
        background: red;
        width: 50px;
        height: 100px;
        transform-origin: left top;
    transform: skewX(-10deg);
        position: absolute;
    }
    .after-block {
        content: "после";
        background: red;
        width: 50px;
        height: 100px;
        transform-origin: left top;
    transform: skewX(-10deg);
        float: left;
        position: relative;
    }
    .before-block:before {
                content: "";
        background: white;
        width: 50px;
        height: 100px;
        transform: skewX(10deg);
        position: absolute;
        right: 10px;
    }
    .after-block:after {
            content: "";
        background: white;
        width: 50px;
        height: 100px;
        transform: skewX(10deg);
        position: absolute;
        right: -10px;
    }
     
    Последнее редактирование: 28 ноя 2016
    AlexGood нравится это.
  5. AlexGood

    AlexGood

    Регистрация:
    28 ноя 2016
    Сообщения:
    254
    Симпатии:
    7
  6. iga

    iga

    Регистрация:
    6 фев 2014
    Сообщения:
    285
    Симпатии:
    53
    Поиграйтесь с моим css и всё вам станет ясно.

    Может кто более оптимизированный вариант предложит!?
     
    AlexGood нравится это.
  7. AlexGood

    AlexGood

    Регистрация:
    28 ноя 2016
    Сообщения:
    254
    Симпатии:
    7
    Все забываю показать что у меня по итогу вышло - вот результат: http://joxi.ru/DmBDpWWIwJ7qqA