4

ここで私のデモ: https://codepen.io/joondoe/pen/MWwmGwG?editors=0100

私の例では CSS を使用していますが、SVG を使用したソリューションも受け入れています。

内部にコンテンツを埋めるボーダー画像を作成することができました。今、100% 滑らかな境界線画像を作成できるかどうか疑問に思っていますか? つまり、元のボーダー画像を自動的に再現するボーダー画像、またはプログラムで可能な限り近い画像です。

私のデモでは、かなり問題ないことがわかりますが、元の境界線の画像に比べてエイリアシングとラグがまだいくつかあります. 元のボーダー画像は次のとおりです。

ここに画像の説明を入力

ここに私のコード：

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

CSSまたはSVGのプログラム機能のみを使用して元の境界線の画像を再現する方法はありますか?パーセンテージ、塗りつぶしプロパティなどすべて?

編集： このソリューションのTermani Afifに感謝します。 Termani Afif の anwser の画像にピクセルのギャップがあったことに驚いたので、おそらく私のボーダー画像とマスクはそのように言うのに自由ではなかったと思いました。だから私は他の画像で再構成しました、そしてそれは非常にうまく機能します、ここでデモ: codepen.io/joondoe/pen/GRJmBQK?editors=0100

4

2 に答える 2

3

これがマスクのアイデアです。コツは、画像を2つ用意することです。以下のような境界線と画像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>

ボーダー付き CSS マスク画像

1画質にはこだわりませんでした。内側の領域を不透明にするための最初の画像の編集は簡単でした。アイデアは、境界線の画像（内側が透明）と塗りつぶされた画像（内側が不透明）を持つことです

于 2020-02-28T10:46:01.510 に答える
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>

  1. パラメータを 1 つ変更するだけで、任意の境界線の色を選択できます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>

  1. 必要に応じて境界線をアニメーション化することもできます:

カーソルを合わせるとボーダー アニメーションが開始されます

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

于 2020-02-28T13:13:40.863 に答える