1

Встретил такой занятный бордер на пинте, может кто делал что-то похожее, подскажите как можно реализовать.. Пробовал маской повесить но все идет вкривь и вкось полупрозрачный бордер

3
  • А что здесь полупрозрачного? Я вижу абсолютно непрозрачный чёрный и абсолютно непрозрачный белый, например
    – andreymal
    Commented 29 мая 2023 в 15:10
  • @andreymal даже если так, без маски не обойтись
    – emptyman
    Commented 29 мая 2023 в 15:23
  • По вашей картинке совершенно непонятно что вы считаете «занятным бордюром». Но вообще я не вижу на ней ничего сложного.
    – Alexey Ten
    Commented 29 мая 2023 в 15:42

1 ответ 1

4

В сниппете представлен один из вариантов вёрстки дизайна представленного на картинке. Не смотря на то, что лишнего в коде ничего нет, всё же рекомендую тщательней изучить стили блоков .spacer и градиенты в частности.

/* For example only --> */ body { margin: 0; min-height: 100vh; background: center / cover url("https://phonoteka.org/uploads/posts/2021-06/1623575344_29-phonoteka_org-p-abstraktsiya-v-cherno-belom-tsvete-oboi-kr-30.jpg") no-repeat;
  display: grid; place-items: center; }

.block {
  min-width: min-content;
  max-width: 96vw;
  width: 582px;
  padding: 14px;
  border-radius: 21px;
  box-sizing: border-box;
  background-color: #000;
  box-shadow: inset 0 0 0 1px #f000, 0 0 0 3px #fff;
  overflow: hidden;
  resize: horizontal;
}

.head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 40px;
  height: 54px;
  width: 100%;
  padding: 0 13px;
  border-radius: 20px;
  box-sizing: border-box;
  background-color: #fff;
}
.logo {
  height: 30px;
  width: 30px;
}
.menu {
  list-style: none;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 25px;
  height: 54px;
  width: 100%;
  border-radius: 20px;
  font: 12px/1em Monserrat, sans-serif;
}

.supl {
  display: grid;
  place-items: center;
  height: 30px;
  min-width: 120px;
  border: none;
  border-radius: 10px;
  font: 11px/1em sans-serif;
  color: #fff;
  background-color: #9d7df8;
}

.spacer {
  height: 15px;
  width: 100%;
  border-radius: 20px;
  background: 
    calc(0% - 12px) 0px / 62px 15px radial-gradient(circle 7.5px at 31px 7.5px, #000 0 85%, #0000 100%) no-repeat, 
    calc(100% + 12px) 0px / 62px 15px radial-gradient(circle 7.5px at 31px 7.5px, #000 0 85%, #0000 100%) no-repeat, 
    calc(50% - 15px) 0px / 62px 15px radial-gradient(circle 7.5px at 31px 7.5px, #000 0 85%, #0000 100%) repeat-x, 
    calc(50% + 15px) 0 / 62px 15px radial-gradient(circle 7.5px at 31px 7.5px, #000 0 85%, #0000 100%) repeat-x, 
    calc(50% - 0px) 0 / 62px 15px linear-gradient(to right, #0000 0 16px, #000 17px 45px, #0000 46px 62px) repeat-x, 
    50% 50% / calc(100% - 38px) 15px linear-gradient(to right, #fff 0 0) no-repeat;
}

.content {
  min-height: min-content;
  height: min-content;
  width: 100%;
  padding: 13px;
  border-radius: 20px;
  box-sizing: border-box;
  background-color: #fff;
}
<div class="block">
  <div class="head">
    <img src="https://www.lomond.ru/sites/default/files/images/media/gif/ornam/sign/131tl.gif" alt="https://phonoteka.org/" class="logo">
    <nav class="menu">
      <li>Home</li>
      <li>About</li>
      <li>Contacts</li>
    </nav>
    <button class="supl">Go to supplie's</button>
  </div>
  <div class="spacer"></div>
  <div class="content">
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Eius minima, minus natus consequatur perferendis veritatis corporis nisi vitae? Tenetur deleniti quod atque illo a ipsam maxime amet cupiditate quidem? Magni. Incidunt cupiditate dolore cumque aperiam.
    Nemo nobis, optio sint culpa repellendus maxime debitis iure eius, ipsa laboriosam recusandae! Quo, dolorum nemo distinctio eum veniam rerum labore ipsa iusto fugit expedita.
  </div>
  <div class="spacer"></div>
  <div class="content">
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Eius minima, minus natus consequatur perferendis veritatis corporis nisi vitae? Tenetur deleniti quod atque illo a ipsam maxime amet cupiditate quidem? Magni. Incidunt cupiditate dolore cumque aperiam.
  </div>
</div>

Откройте и запустите сниппет, разверните его на весь экран и попробуйте изменить ширину блока, ухватив за правый нижний уголок.

4
  • 1
    Я в восторге, спасибо, похоже это наиболее чистый вариант решения который только возможен)
    – emptyman
    Commented 15 июн. 2023 в 20:44
  • 1
    а ещё я не знал что градиент можно так скруглять....
    – emptyman
    Commented 15 июн. 2023 в 20:45
  • @emptyman, этот вариант показался самым очевидным для меня, хотя были ещё варианты - например, не количество штрихов, а их размер, или набор элементов и flex.
    – UModeL
    Commented 16 июн. 2023 в 1:10
  • 1
    я тоже сперва гридами и сделал но подумал что можно как-нибудь маской и псевдоэлементом сообразить...
    – emptyman
    Commented 18 июн. 2023 в 21:48

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

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