Is there a method to ensure 100% faithful reproduction of a border-image in CSS or SVG?

问题

Here my demo: https://codepen.io/joondoe/pen/MWwmGwG?editors=0100

In my example I am using CSS but I am open to solutions using SVG also.

I have managed to create a border-image with filling content inside. Now I am wondering if it is possible to create a 100% smooth border-image? I mean by that, a border image that automatically reproduce the original border image or nearest possible in a programmatic fashion.

In my demo you can see it is pretty OK but there still some aliasing and lags relative to the original border image. Here the original border image:

Here my code:

.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>

Is there way to reproduce the original border's image using only programmatic feature in CSS or SVG -percentage, filling property and all?

edit: thanks to Termani Afif for this solution. I was surprised that there was a pixel's gap on the image in the Termani Afif's anwser, so I have assumed maybe my border-image and mask wasn't aliase'free to say it like that. So I have recomposed with other image, and it works very well, here the demo: codepen.io/joondoe/pen/GRJmBQK?editors=0100

回答1:

Here is an idea with mask. The trick is to have two images. Your initial image that will contain the border and an image¹ like below:

The above image will be used to mask the area and a pseudo element with the other image will be on the top to create the border:

.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>

¹ I didn't focus on the image quality. It was a fast edit to the initial image to make the inside area non-transparent. The idea is to have the border image (transparent inside) and a filled image (non-transparent inside)

回答2:

Svg solution:
An SVG mask is used to cut the image into a frame shape.

To accurately repeat the shape of the frame, I used a vector editor:

An SVG mask is used to cut the image into a frame shape.

The application is responsive and works in all modern browsers including 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>

Update

When solving SVG, later you can easily change the appearance of the border:

By applying a filter

<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>

Select any border color by changing just one parameter 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>

You can even animate the border if you wish:

Border animation starts when you hover

.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>

来源：https://stackoverflow.com/questions/60449618/is-there-a-method-to-ensure-100-faithful-reproduction-of-a-border-image-in-css

标签

html

css

svg

css-mask