|
Сообщение от Блондинка
|
|
как сделать бордер вокруг видимой области а не по всему блоку?
|
border предназначен для работы с прямоугольной областью, как работать с любой областью я вам показывал полгода назад!
Предыдущий пример можно доделать так...
<div class="box"></div>
<style>
.box {
width: 320px;
height: 240px;
background: yellowgreen;
border-radius: 1em;
clip-path: polygon(0 0, 100% 0, 100% 90%, 50% 100%, 0 90%);
position: relative;
}
.box::before {
all: inherit;
content: "";
display: block;
transform: scale(0.9);
background: url(https://picsum.photos/320/240) center / cover;
position: absolute;
}
</style>
Если вам нужна более настраиваемая рамка, то используйте svg...
<style>
svg.box {
width: 320px;
height: 240px;
}
</style>
<svg viewBox="-5 -5 330 250" class="box">
<style>
path {
stroke: tan;
stroke-width: 10px;
fill: url(#img1);
}
</style>
<defs>
<pattern id="img1" patternUnits="userSpaceOnUse" width="320" height="240">
<image xlink:href="https://picsum.photos/320/240/" x="0" y="0" />
</pattern>
</defs>
<path d="M 20 0 h 280 a 20 20 0 0 1 20 20 v 190 l -160 30 l -160 -30 v -190 a 20 20 0 0 1 20 -20 z"></path>
</svg>