Как реализовать не стандартные (обрезанные) границы в блоке,за которым имеется цветной фон?

Здравствуйте.Затрудняюсь реализовать момент-сделать блок так,чтобы border в слева наверх был обрезан.Данный метод представляю как делать но с белым фоном,а данная ситуация поставила меня в тупик. Приложил скриншот для наглядности43113601b6a542f8b12cce59e734744f.png
  • Вопрос задан
  • 5175 просмотров
Решения вопроса 2
Petroveg
@Petroveg
Миром правят маленькие с#@&ки
jsfiddle.net/petroveg/dL91e497
Обращаем внимание на связанные величины.

Вот вам ещё немного магии codepen.io/cleric/pen/oDsbh
Скруглённые края. 20px — связанная величина.
Ответ написан
Fesor
@Fesor
Full-stack developer (Symfony, Angular)
codepen.io/anon/pen/IGrlo - не слишком красивое решение, но кросбраузерное. Еще можно поиграться с flexbox-ами что бы сделать все динамичненьким.
Ответ написан
Пригласить эксперта
Ответы на вопрос 3
@skyfortress
Сложить два дива: один без бордера сверху, а второй только с бордер-топ и бордер-райт (ограничить ширину и спозиционировать в верхний правый угол). Вот такая идея.
Ответ написан
@rivalsm
Мне одному кажется, что если заголовок вместе с текстом поместить целиком внутрь блока с рамкой, будет красивее, понятнее и проще в реализации? :-) Хотя, не буду навязывать свою точку зрения. Возможно, есть жесткие требования к соответствию дизайн-макету.
Ответ написан
@eandr_67
web-программист (*AMP, Go, JavaScript, вёрстка).
В HTML есть тег LEGEND, как раз и обеспечивающий вывод заголовка вместо части рамки.

А если серьёзно, то задача элементарно решается посредством презренной табличной вёрстки - достаточно вспомнить об атрибутах colspan и rowspan. Например, так:

<table style="border: none; border-collapse: collapse; width: 800px;">
  <tr>
    <td colspan="2" rowspan="2" style="padding-right: 10px; font-size: 200%; white-space: nowrap;">
      Здесь будет заголовок
    </td>
    <td style="width: 100%;  font-size: 0px;"></td>
  </tr>
  <tr>
    <td style="border-top: 1px solid #000000; border-right: 1px solid #000000; font-size: 0px;"></td>
  </tr>
  <tr>
    <td style="width: 10px; font-size: 0px;"></td>
    <td colspan="2" style="border-right: 1px solid #000000; border-bottom: 1px solid #000000; border-left: 1px solid #000000; padding: 10px;">
      А здесь будет контент
    </td>
  </tr>
 </table>


А вот та же самая, идея, но в блочной вёрстке:

<div style="width: 800px;">
  <div style="display: table-cell; height: 25px; font-size: 20px; padding: 0px 10px 0px 0px; white-space: nowrap;">
    Здесь будет заголовок
  </div>
  <div style="display: table-cell; width: 100%; height: 25px; vertical-align: top;">
    <div style="margin-top: 12px; height: 12px; border-top: 1px solid #000000; border-right: 1px solid #000000;"></div>
  </div>
  <div style="margin-left: 10px; padding: 10px; border-right: 1px solid #000000; border-bottom: 1px solid #000000; border-left: 1px solid #000000; padding: 10px;">
    А здесь будет контент
  </div>
</div>


При использовании :after можно ещё упростить: codepen.io/anon/pen/kDLiA
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы