Встретил такой занятный бордер на пинте, может кто делал что-то похожее, подскажите как можно реализовать.. Пробовал маской повесить но все идет вкривь и вкось
-
А что здесь полупрозрачного? Я вижу абсолютно непрозрачный чёрный и абсолютно непрозрачный белый, например– andreymalCommented 29 мая 2023 в 15:10
-
@andreymal даже если так, без маски не обойтись– emptymanCommented 29 мая 2023 в 15:23
-
По вашей картинке совершенно непонятно что вы считаете «занятным бордюром». Но вообще я не вижу на ней ничего сложного.– Alexey TenCommented 29 мая 2023 в 15:42
Добавить комментарий
|
1 ответ
В сниппете представлен один из вариантов вёрстки дизайна представленного на картинке. Не смотря на то, что лишнего в коде ничего нет, всё же рекомендую тщательней изучить стили блоков .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>
Откройте и запустите сниппет, разверните его на весь экран и попробуйте изменить ширину блока, ухватив за правый нижний уголок.
-
1Я в восторге, спасибо, похоже это наиболее чистый вариант решения который только возможен)– emptymanCommented 15 июн. 2023 в 20:44
-
1
-
@emptyman, этот вариант показался самым очевидным для меня, хотя были ещё варианты - например, не количество штрихов, а их размер, или набор элементов и flex.– UModeLCommented 16 июн. 2023 в 1:10
-
1я тоже сперва гридами и сделал но подумал что можно как-нибудь маской и псевдоэлементом сообразить...– emptymanCommented 18 июн. 2023 в 21:48