Как сделать shape внутри shape и чтобы они были responsive? Фото и код прилагаются

Question

Прошу помочь сделать нормальное html письмо с такими shape'ами как в макете. По возможности надо чтобы был inline css. Заранее спасибо!

    <div style="max-width:700px;margin:0 auto;border-radius:4px;">
  <table style="font-size:0px;background:#ffffff" align="center">
    <tr>
      <td style="padding:50px 50px 25px 50px">
        <div style="color:#737f8d;font-family:'Roboto',sans-serif;line-height:22px;text-align:center">
          <h2 style="font-weight:500;font-size:20px;color:#4f545c; margin-bottom: 45px">Здравствуйте, Alexey Bahmetov!</h2>
          <p style="font-weight:300; font-size:15px;">Наша команда поддержки ответила на ваш запрос!<br>Ответ вы можете прочитать ниже</p>
        </div>
      </td>
    </tr>

Здесь начинается проблема с этими shapes

    <tr>
      <td>
        <div class="container">
          <div class="element">
            Спасибо вам за обращение в нашу службу поддержки!

            Неделю назад, а конкретнее 05/04/2020, вы обратились к нам с данной ошибкой. Мы проверили вашу активность и транзакции за последний месяц, данной ошибки не было обнаружено. Возможно были допущены какие-то ошибки. Попробуйте всё
            перепроверить и если ошибка останется, напишите нам снова!

            С уважением,
            Upskill Support
          </div>
        </div>
      </td>
    </tr>

Здесь заканчивается проблема с shapes

    <tr>
      <td style="padding:40px 50px">
        <p style="border-top:1px solid #dcddde;"></p>
      </td>
    </tr>
    <tr>
      <td style="padding:0px 0px 40px 0px">
        <p style="color:#747f8d;font-family:'Roboto',sans-serif;font-size:13px;line-height:20px;text-align:center;font-weight:300;">
          Хотите оставить отзыв? Оставьте нам отзыв на нашей <a href="#" style="color:#7289da">feedback page</a>.<br>
          Нужна помощь? <a href="#" style="color:#7289da">Свяжитесь с нашей support team</a> или в Twitter <a href="#" style="color:#7289da">@Upskill</a>.</p>
      </td>
    </tr>
  </table>
</div>

[![Так выглядит макет][2]][2]

Answer 1

Используйте свойство outline с outline-offset а не shape внутри shape, будет работать и с inline блоками, но нужно учитывать что ширина outline и его отступ не засчитывается в размер блока.

.container {
  width: 300px;
  height: 100px;
  border: 1px solid black;
  outline: 1px solid red;
  outline-offset: 5px;
}

<div class="container"></div>

Но можно и shape внутри shape. Но блок с текстом должен быть inline-block, иначе border не встанет

.container {
  max-width: 305px;
  padding: 5px;
  border: 1px solid red
}

.element {
  display: inline-block;
  padding: 5px;
  border: 1px solid black
}

<div class="container">
  <div class="element">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam
  </div>
</div>

Ответ на дополнение к вопросу

<div style="max-width:700px;margin:0 auto;border-radius:4px;">
  <table style="background:#ffffff" align="center">
  <!-- Шапка -->
    <tr>
      <td style="padding:50px 50px 25px 50px">
        <div style="color:#737f8d;font-family:'Roboto',sans-serif;line-height:22px;text-align:center">
          <h2 style="font-weight:500;font-size:20px;color:#4f545c; margin-bottom: 45px">Здравствуйте, Alexey Bahmetov!</h2>
          <p style="font-weight:300; font-size:15px;">Наша команда поддержки ответила на ваш запрос!<br>Ответ вы можете прочитать ниже</p>
        </div>
      </td>
    </tr>
    
  <!-- Наши shape in shape -->
    <tr>
      <td>
        <div style="border: 2px solid #EFF0F2; padding: 10px; border-radius: 5px;">
          <div style="background-color:#EFF0F2;font-family:'Roboto',sans-serif; padding: 50px; border-radius: 5px; color:#4f545c;font-weight:500">
            <span style="font-size:20px">Спасибо вам за обращение в нашу службу поддержки!</span><br><br>
            <span style="font-size:16px">Неделю назад, а конкретнее 05/04/2020, вы обратились к нам с данной ошибкой. Мы проверили вашу активность                   и транзакции за последний месяц, данной ошибки не было обнаружено. Возможно были допущены какие-то ошибки. Попробуйте всё
                  перепроверить и если ошибка останется, напишите нам снова! <br><br>С уважением, Upskill Support
            </span>
          </div>
        </div>
      </td>
    </tr>
    
  <!-- Линия -->
    <tr>
      <td style="padding:40px 50px">
        <p style="border-top:1px solid #dcddde;"></p>
      </td>
    </tr>
    
  <!-- Подвал -->
    <tr>
      <td style="padding:0px 0px 40px 0px">
        <p style="color:#747f8d;font-family:'Roboto',sans-serif;font-size:13px;line-height:20px;text-align:center;font-weight:300;">
          Хотите оставить отзыв? Оставьте нам отзыв на нашей 
          <a href="#" style="color:#7289da">feedback page</a>.<br> Нужна помощь? 
          <a href="#" style="color:#7289da">Свяжитесь с нашей support team</a> или в Twitter <a href="#" style="color:#7289da">@Upskill</a>.</p>
      </td>
    </tr>
    
  </table>
</div>

БЛОГ НА HUSL

Как сделать shape внутри shape и чтобы они были responsive? Фото и код прилагаются

Ответы (1 шт):