Есть ли способ обеспечить 100% точное воспроизведение изображения границы в CSS или SVG?

Question

Вот мое демо: https://codepen.io/joondoe/pen/MWwmGwG?editors=0100

В моем примере я использую CSS, но я также открыт для решений, использующих SVG.

Мне удалось создать рамку-изображение с заполнением содержимого внутри. Теперь я задаюсь вопросом, возможно ли создать 100% гладкое изображение границы? Под этим я подразумеваю изображение границы, которое автоматически воспроизводит исходное изображение границы или самое близкое из возможных программным способом c.

В моей демонстрации вы можете видеть, что это довольно хорошо, но все же есть некоторые псевдонимы и лаги относительно исходного изображения границы. Вот исходное изображение границы:

Вот мой код:

.container {
  background-color: #444;
  width: 300px;
  height: 350px;
  padding: 20;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: solid ;
  border-width:15px 30px 30px 25px;
  border-image:url( https://i.imgur.com/Z6TVgss.png)40 stretch;
 overflow:hidden;
 box-sizing:content-box; background:url(https://www.ecopetit.cat/wpic/mpic/6-67359_race-car.jpg) center/cover no-repeat content-box;
  
}

div.element {
  width: 50px;
  height: 50px; 
  mask-image: url( https://i.imgur.com/Z6TVgss.png);
  
};

div.icon-image {
  mask-size: 100% 100%;
  mask-position: 0% 0%;
  mask-repeat: no-repeat;
  display: flex;
  /* border: 1px solid orange; */
  flex-direction: column;
  align-items: center;
  justify-content: center;
 
}

div.icon-image img {
  width: 100%; 
}

<div class="container">
  <div title="" class="icon-image element"></div>
</div>

Есть ли способ воспроизвести исходное изображение границы, используя только программную функцию c в CSS или SVG-процент, свойство заполнения и все?

---

edit: спасибо Termani Afif за это решение. Я был удивлен, что на изображении был пробел в пикселях в ответе Термани Афифа, так что я предположил, что, возможно, мое изображение границы и маска не были свободны, чтобы сказать это так. Поэтому я перекомпоновал с другим изображением, и оно работает очень хорошо, вот демо: codepen.io/joondoe/pen/GRJmBQK?editors=0100

Answer 1

Вот идея с маской. Хитрость в том, чтобы иметь два изображения. Ваше начальное изображение, которое будет содержать рамку и изображение ¹ , как показано ниже:

Приведенное выше изображение будет использоваться для маскировки область и псевдоэлемент с другим изображением будут сверху для создания границы:

.box {
  width:500px;
  height:300px;
  background:url(https://www.ecopetit.cat/wpic/mpic/6-67359_race-car.jpg) center/cover;
  -webkit-mask:url(https://i.ibb.co/D1X8D2J/ZHD6p.png) center/contain no-repeat;
          mask:url(https://i.ibb.co/D1X8D2J/ZHD6p.png) center/contain no-repeat;
  position:relative;
}
.box:before {
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background:url(https://i.stack.imgur.com/ZHD6p.png) center/contain no-repeat;
}


body {
  background:pink;
}

<div class="box"></div>

¹ Я не фокусировался на качестве изображения. Это было быстрое редактирование исходного изображения, чтобы сделать внутреннюю область непрозрачной. Идея состоит в том, чтобы иметь изображение границы (прозрачное внутри) и заполненное изображение (непрозрачное внутри)

Answer 2

Решение SVG:
Маска SVG используется для вырезания изображения в форму кадра.

Чтобы точно повторить форму рамки, я использовал векторный редактор:

Маска SVG используется для обрезки изображения в форме рамки.

Приложение отзывчивое и работает во всех современных браузерах, включая MS Edge

<style>
.container {

width:90vw;
height:90vh;
background:skyblue;
}

.ram {
fill:none;
stroke-width:25;
stroke:black;
}
</style> 
<div class="container">
<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" version="1.1" width="100%" height="100%" viewBox="0 0 1920 1125" >

<defs>
  <mask id="msk1" >  
          <!-- Border obtained using the vector editor -->
     <path id="mask_ram" fill="white" stroke-width="25" stroke="white" d="M50.6 34.6C566.9 16.1 1222.4 30.4 1812.5 24.5c19.2-0.2 42.9-6 57.3 6.7 14.3 12.7 10.9 36.7 13.5 55.6 2.3 17.3 1.7 52.2 1.7 52.2 0 0 4.9 49.5 3.4 74.2-1 16.5-8.4 32.3-8.4 48.9 0 23.4 9.5 45.8 11.8 69.1 1.9 19 1.7 57.3 1.7 57.3l3.4 80.9-1.7 79.2c0 0 0 74.7-6.7 111.2-3.4 18.5-12.7 35.5-16.9 53.9-6.3 28.2-11.8 86-11.8 86l-5.1 97.8-3.4 77.5c0 0 4.7 34.4 0 50.6-3.5 12.1-9.6 25.3-20.2 32-28 17.7-65.6 8.5-98.5 11.8-35.9 3.5-71.9 5.9-107.9 8.4-44.4 3.1-88.8 5.2-133.1 8.4-42.2 3-84.2 8.2-126.4 10.1-44.9 2.1-89.9 2.7-134.8 1.7-48.9-1.1-97.8-5.3-146.6-8.4-40.5-2.6-80.9-5.5-121.3-8.4-38.2-2.7-76.4-5.2-114.6-8.4-29.2-2.5-58.5-5-87.6-8.4-24.2-2.9-48.3-6.5-72.5-10.1-32.1-4.8-63.9-11-96.1-15.2-22.4-2.9-45.2-3-67.4-6.7-33-5.6-65-16.3-97.8-23.6-35.3-7.9-70.1-19.3-106.2-21.9-27.5-2-82.6 5.1-82.6 5.1l-91 10.1-84.3 5.1c0 0-34.8 15.2-35.4 3.4-2.6-49-1.7-166.9-1.7-166.9l3.4-197.2 5.1-224.2c0 0-1.2-131.5 1.7-197.2C38.2 161.4 28.9 35.3 50.6 34.6Z" />
    
  </mask>
</defs>
    <!-- An SVG mask is used to cut the image into a frame shape.  -->
 <image mask="url(#msk1)" xlink:href="https://i.stack.imgur.com/S7iXP.jpg" height="100%" width="100%" />

     <!-- Border on top of the mask. -->
  <path class="ram" d="M50.6 34.6C566.9 16.1 1222.4 30.4 1812.5 24.5c19.2-0.2 42.9-6 57.3 6.7 14.3 12.7 10.9 36.7 13.5 55.6 2.3 17.3 1.7 52.2 1.7 52.2 0 0 4.9 49.5 3.4 74.2-1 16.5-8.4 32.3-8.4 48.9 0 23.4 9.5 45.8 11.8 69.1 1.9 19 1.7 57.3 1.7 57.3l3.4 80.9-1.7 79.2c0 0 0 74.7-6.7 111.2-3.4 18.5-12.7 35.5-16.9 53.9-6.3 28.2-11.8 86-11.8 86l-5.1 97.8-3.4 77.5c0 0 4.7 34.4 0 50.6-3.5 12.1-9.6 25.3-20.2 32-28 17.7-65.6 8.5-98.5 11.8-35.9 3.5-71.9 5.9-107.9 8.4-44.4 3.1-88.8 5.2-133.1 8.4-42.2 3-84.2 8.2-126.4 10.1-44.9 2.1-89.9 2.7-134.8 1.7-48.9-1.1-97.8-5.3-146.6-8.4-40.5-2.6-80.9-5.5-121.3-8.4-38.2-2.7-76.4-5.2-114.6-8.4-29.2-2.5-58.5-5-87.6-8.4-24.2-2.9-48.3-6.5-72.5-10.1-32.1-4.8-63.9-11-96.1-15.2-22.4-2.9-45.2-3-67.4-6.7-33-5.6-65-16.3-97.8-23.6-35.3-7.9-70.1-19.3-106.2-21.9-27.5-2-82.6 5.1-82.6 5.1l-91 10.1-84.3 5.1c0 0-34.8 15.2-35.4 3.4-2.6-49-1.7-166.9-1.7-166.9l3.4-197.2 5.1-224.2c0 0-1.2-131.5 1.7-197.2C38.2 161.4 28.9 35.3 50.6 34.6Z" />  
</svg>
</div>

Обновление

При решении SVG позже вы можете легко изменить внешний вид границы:

1. Применяя фильтр

<style>
.container {

width:90vw;
height:90vh;
background:skyblue;
}

.ram {
fill:none;
stroke-width:30;
stroke:black;
filter: url(#displacementFilter);
}
</style> 
<div class="container">
<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" version="1.1" width="100%" height="100%" viewBox="0 0 1920 1125" >

<defs>
  <mask id="msk1" >  
          <!-- Border obtained using the vector editor -->
     <path id="mask_ram" fill="white" stroke-width="25" stroke="white" d="M50.6 34.6C566.9 16.1 1222.4 30.4 1812.5 24.5c19.2-0.2 42.9-6 57.3 6.7 14.3 12.7 10.9 36.7 13.5 55.6 2.3 17.3 1.7 52.2 1.7 52.2 0 0 4.9 49.5 3.4 74.2-1 16.5-8.4 32.3-8.4 48.9 0 23.4 9.5 45.8 11.8 69.1 1.9 19 1.7 57.3 1.7 57.3l3.4 80.9-1.7 79.2c0 0 0 74.7-6.7 111.2-3.4 18.5-12.7 35.5-16.9 53.9-6.3 28.2-11.8 86-11.8 86l-5.1 97.8-3.4 77.5c0 0 4.7 34.4 0 50.6-3.5 12.1-9.6 25.3-20.2 32-28 17.7-65.6 8.5-98.5 11.8-35.9 3.5-71.9 5.9-107.9 8.4-44.4 3.1-88.8 5.2-133.1 8.4-42.2 3-84.2 8.2-126.4 10.1-44.9 2.1-89.9 2.7-134.8 1.7-48.9-1.1-97.8-5.3-146.6-8.4-40.5-2.6-80.9-5.5-121.3-8.4-38.2-2.7-76.4-5.2-114.6-8.4-29.2-2.5-58.5-5-87.6-8.4-24.2-2.9-48.3-6.5-72.5-10.1-32.1-4.8-63.9-11-96.1-15.2-22.4-2.9-45.2-3-67.4-6.7-33-5.6-65-16.3-97.8-23.6-35.3-7.9-70.1-19.3-106.2-21.9-27.5-2-82.6 5.1-82.6 5.1l-91 10.1-84.3 5.1c0 0-34.8 15.2-35.4 3.4-2.6-49-1.7-166.9-1.7-166.9l3.4-197.2 5.1-224.2c0 0-1.2-131.5 1.7-197.2C38.2 161.4 28.9 35.3 50.6 34.6Z" />
    
  </mask>  
    <filter id="displacementFilter">
     <feTurbulence type="turbulence" baseFrequency="0.05 0.05"
        numOctaves="3" result="turbulence" seed="10"/>
    <feDisplacementMap in2="turbulence" in="SourceGraphic"
        scale="10" xChannelSelector="R" xChannelSelector="G" yChannelSelector="B"/>
  </filter>	   
</defs>
    <!-- An SVG mask is used to cut the image into a frame shape.  -->
 <image mask="url(#msk1)" xlink:href="https://i.stack.imgur.com/S7iXP.jpg" height="100%" width="100%" />

     <!-- Border on top of the mask. -->
  <path  class="ram" d="M50.6 34.6C566.9 16.1 1222.4 30.4 1812.5 24.5c19.2-0.2 42.9-6 57.3 6.7 14.3 12.7 10.9 36.7 13.5 55.6 2.3 17.3 1.7 52.2 1.7 52.2 0 0 4.9 49.5 3.4 74.2-1 16.5-8.4 32.3-8.4 48.9 0 23.4 9.5 45.8 11.8 69.1 1.9 19 1.7 57.3 1.7 57.3l3.4 80.9-1.7 79.2c0 0 0 74.7-6.7 111.2-3.4 18.5-12.7 35.5-16.9 53.9-6.3 28.2-11.8 86-11.8 86l-5.1 97.8-3.4 77.5c0 0 4.7 34.4 0 50.6-3.5 12.1-9.6 25.3-20.2 32-28 17.7-65.6 8.5-98.5 11.8-35.9 3.5-71.9 5.9-107.9 8.4-44.4 3.1-88.8 5.2-133.1 8.4-42.2 3-84.2 8.2-126.4 10.1-44.9 2.1-89.9 2.7-134.8 1.7-48.9-1.1-97.8-5.3-146.6-8.4-40.5-2.6-80.9-5.5-121.3-8.4-38.2-2.7-76.4-5.2-114.6-8.4-29.2-2.5-58.5-5-87.6-8.4-24.2-2.9-48.3-6.5-72.5-10.1-32.1-4.8-63.9-11-96.1-15.2-22.4-2.9-45.2-3-67.4-6.7-33-5.6-65-16.3-97.8-23.6-35.3-7.9-70.1-19.3-106.2-21.9-27.5-2-82.6 5.1-82.6 5.1l-91 10.1-84.3 5.1c0 0-34.8 15.2-35.4 3.4-2.6-49-1.7-166.9-1.7-166.9l3.4-197.2 5.1-224.2c0 0-1.2-131.5 1.7-197.2C38.2 161.4 28.9 35.3 50.6 34.6Z" />  
</svg>
</div>

Выберите любой цвет рамки, изменив только один параметр fill =" purple "

<style>
.container {

width:90vw;
height:90vh;
background:skyblue;
}

.ram {
fill:none;
stroke-width:30;
stroke:purple;
filter: url(#displacementFilter);
}
</style> 
<div class="container">
<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" version="1.1" width="100%" height="100%" viewBox="0 0 1920 1125" >

<defs>
  <mask id="msk1" >  
          <!-- Border obtained using the vector editor -->
     <path id="mask_ram" fill="white" stroke-width="25" stroke="white" d="M50.6 34.6C566.9 16.1 1222.4 30.4 1812.5 24.5c19.2-0.2 42.9-6 57.3 6.7 14.3 12.7 10.9 36.7 13.5 55.6 2.3 17.3 1.7 52.2 1.7 52.2 0 0 4.9 49.5 3.4 74.2-1 16.5-8.4 32.3-8.4 48.9 0 23.4 9.5 45.8 11.8 69.1 1.9 19 1.7 57.3 1.7 57.3l3.4 80.9-1.7 79.2c0 0 0 74.7-6.7 111.2-3.4 18.5-12.7 35.5-16.9 53.9-6.3 28.2-11.8 86-11.8 86l-5.1 97.8-3.4 77.5c0 0 4.7 34.4 0 50.6-3.5 12.1-9.6 25.3-20.2 32-28 17.7-65.6 8.5-98.5 11.8-35.9 3.5-71.9 5.9-107.9 8.4-44.4 3.1-88.8 5.2-133.1 8.4-42.2 3-84.2 8.2-126.4 10.1-44.9 2.1-89.9 2.7-134.8 1.7-48.9-1.1-97.8-5.3-146.6-8.4-40.5-2.6-80.9-5.5-121.3-8.4-38.2-2.7-76.4-5.2-114.6-8.4-29.2-2.5-58.5-5-87.6-8.4-24.2-2.9-48.3-6.5-72.5-10.1-32.1-4.8-63.9-11-96.1-15.2-22.4-2.9-45.2-3-67.4-6.7-33-5.6-65-16.3-97.8-23.6-35.3-7.9-70.1-19.3-106.2-21.9-27.5-2-82.6 5.1-82.6 5.1l-91 10.1-84.3 5.1c0 0-34.8 15.2-35.4 3.4-2.6-49-1.7-166.9-1.7-166.9l3.4-197.2 5.1-224.2c0 0-1.2-131.5 1.7-197.2C38.2 161.4 28.9 35.3 50.6 34.6Z" />
    
  </mask>   
           
    <filter id="displacementFilter">
 
    <feTurbulence type="turbulence" baseFrequency="0.05 0.05"
        numOctaves="3" result="turbulence" seed="10"/>
    <feDisplacementMap in2="turbulence" in="SourceGraphic"
        scale="8" xChannelSelector="R" xChannelSelector="G" yChannelSelector="B"/>
  </filter>	   
</defs>
    <!-- An SVG mask is used to cut the image into a frame shape.  -->
 <image mask="url(#msk1)" xlink:href="https://i.stack.imgur.com/S7iXP.jpg" height="100%" width="100%" />

     <!-- Border on top of the mask. -->
  <path  class="ram" d="M50.6 34.6C566.9 16.1 1222.4 30.4 1812.5 24.5c19.2-0.2 42.9-6 57.3 6.7 14.3 12.7 10.9 36.7 13.5 55.6 2.3 17.3 1.7 52.2 1.7 52.2 0 0 4.9 49.5 3.4 74.2-1 16.5-8.4 32.3-8.4 48.9 0 23.4 9.5 45.8 11.8 69.1 1.9 19 1.7 57.3 1.7 57.3l3.4 80.9-1.7 79.2c0 0 0 74.7-6.7 111.2-3.4 18.5-12.7 35.5-16.9 53.9-6.3 28.2-11.8 86-11.8 86l-5.1 97.8-3.4 77.5c0 0 4.7 34.4 0 50.6-3.5 12.1-9.6 25.3-20.2 32-28 17.7-65.6 8.5-98.5 11.8-35.9 3.5-71.9 5.9-107.9 8.4-44.4 3.1-88.8 5.2-133.1 8.4-42.2 3-84.2 8.2-126.4 10.1-44.9 2.1-89.9 2.7-134.8 1.7-48.9-1.1-97.8-5.3-146.6-8.4-40.5-2.6-80.9-5.5-121.3-8.4-38.2-2.7-76.4-5.2-114.6-8.4-29.2-2.5-58.5-5-87.6-8.4-24.2-2.9-48.3-6.5-72.5-10.1-32.1-4.8-63.9-11-96.1-15.2-22.4-2.9-45.2-3-67.4-6.7-33-5.6-65-16.3-97.8-23.6-35.3-7.9-70.1-19.3-106.2-21.9-27.5-2-82.6 5.1-82.6 5.1l-91 10.1-84.3 5.1c0 0-34.8 15.2-35.4 3.4-2.6-49-1.7-166.9-1.7-166.9l3.4-197.2 5.1-224.2c0 0-1.2-131.5 1.7-197.2C38.2 161.4 28.9 35.3 50.6 34.6Z" />  
</svg>
</div>

Вы даже можете анимировать границу, если вы будете sh:

Анимация границы начинается при наведении курсора

.container {

width:90vw;
height:90vh;
background:skyblue;
}

.ram {
fill:none;
stroke-width:30;
stroke:black;
filter: url(#displacementFilter);
}

<div class="container">
<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" version="1.1" width="100%" height="100%" viewBox="0 0 1920 1125" >

<defs>
  <mask id="msk1" >  
          <!-- Border obtained using the vector editor -->
     <path id="mask_ram" fill="white" stroke-width="25" stroke="white" d="M50.6 34.6C566.9 16.1 1222.4 30.4 1812.5 24.5c19.2-0.2 42.9-6 57.3 6.7 14.3 12.7 10.9 36.7 13.5 55.6 2.3 17.3 1.7 52.2 1.7 52.2 0 0 4.9 49.5 3.4 74.2-1 16.5-8.4 32.3-8.4 48.9 0 23.4 9.5 45.8 11.8 69.1 1.9 19 1.7 57.3 1.7 57.3l3.4 80.9-1.7 79.2c0 0 0 74.7-6.7 111.2-3.4 18.5-12.7 35.5-16.9 53.9-6.3 28.2-11.8 86-11.8 86l-5.1 97.8-3.4 77.5c0 0 4.7 34.4 0 50.6-3.5 12.1-9.6 25.3-20.2 32-28 17.7-65.6 8.5-98.5 11.8-35.9 3.5-71.9 5.9-107.9 8.4-44.4 3.1-88.8 5.2-133.1 8.4-42.2 3-84.2 8.2-126.4 10.1-44.9 2.1-89.9 2.7-134.8 1.7-48.9-1.1-97.8-5.3-146.6-8.4-40.5-2.6-80.9-5.5-121.3-8.4-38.2-2.7-76.4-5.2-114.6-8.4-29.2-2.5-58.5-5-87.6-8.4-24.2-2.9-48.3-6.5-72.5-10.1-32.1-4.8-63.9-11-96.1-15.2-22.4-2.9-45.2-3-67.4-6.7-33-5.6-65-16.3-97.8-23.6-35.3-7.9-70.1-19.3-106.2-21.9-27.5-2-82.6 5.1-82.6 5.1l-91 10.1-84.3 5.1c0 0-34.8 15.2-35.4 3.4-2.6-49-1.7-166.9-1.7-166.9l3.4-197.2 5.1-224.2c0 0-1.2-131.5 1.7-197.2C38.2 161.4 28.9 35.3 50.6 34.6Z" />
    
  </mask>  
    <filter id="displacementFilter">
    <feTurbulence type="turbulence" baseFrequency="0.05"
        numOctaves="5" result="turbulence" seed="10">
	    <!--Border animation -->
    <animate
      attributeName="baseFrequency"
      dur="100s"
      values="0.05;0.001;0.05"
      repeatCount="1"
      begin="img1.mouseover"
      end="img1.mouseout" />
	</feTurbulence>	
    <feDisplacementMap in2="turbulence" in="SourceGraphic"
        scale="15" xChannelSelector="R" xChannelSelector="G" yChannelSelector="B"/>
  </filter>	   
</defs>
    <!-- An SVG mask is used to cut the image into a frame shape.  -->
 <image id="img1" mask="url(#msk1)" xlink:href="https://i.stack.imgur.com/S7iXP.jpg" height="100%" width="100%" />

     <!-- Border on top of the mask. -->
  <path  class="ram" d="M50.6 34.6C566.9 16.1 1222.4 30.4 1812.5 24.5c19.2-0.2 42.9-6 57.3 6.7 14.3 12.7 10.9 36.7 13.5 55.6 2.3 17.3 1.7 52.2 1.7 52.2 0 0 4.9 49.5 3.4 74.2-1 16.5-8.4 32.3-8.4 48.9 0 23.4 9.5 45.8 11.8 69.1 1.9 19 1.7 57.3 1.7 57.3l3.4 80.9-1.7 79.2c0 0 0 74.7-6.7 111.2-3.4 18.5-12.7 35.5-16.9 53.9-6.3 28.2-11.8 86-11.8 86l-5.1 97.8-3.4 77.5c0 0 4.7 34.4 0 50.6-3.5 12.1-9.6 25.3-20.2 32-28 17.7-65.6 8.5-98.5 11.8-35.9 3.5-71.9 5.9-107.9 8.4-44.4 3.1-88.8 5.2-133.1 8.4-42.2 3-84.2 8.2-126.4 10.1-44.9 2.1-89.9 2.7-134.8 1.7-48.9-1.1-97.8-5.3-146.6-8.4-40.5-2.6-80.9-5.5-121.3-8.4-38.2-2.7-76.4-5.2-114.6-8.4-29.2-2.5-58.5-5-87.6-8.4-24.2-2.9-48.3-6.5-72.5-10.1-32.1-4.8-63.9-11-96.1-15.2-22.4-2.9-45.2-3-67.4-6.7-33-5.6-65-16.3-97.8-23.6-35.3-7.9-70.1-19.3-106.2-21.9-27.5-2-82.6 5.1-82.6 5.1l-91 10.1-84.3 5.1c0 0-34.8 15.2-35.4 3.4-2.6-49-1.7-166.9-1.7-166.9l3.4-197.2 5.1-224.2c0 0-1.2-131.5 1.7-197.2C38.2 161.4 28.9 35.3 50.6 34.6Z" />  
</svg>
</div>