8

ワニは正しい言葉ではないかもしれません。タイトル修正よろしくお願いします。

下の写真のように、コンテナにワニ口のボーダーを入れたいです。

ワニの称号

問題の要素の背景がしっかりしている場合は、疑似要素の策略または CSS3border-imageを使用できます。ただし、この場合、コンテナーの内容は非反復パターンです。

または、画像自体に境界線を設定することもできます。ただし、画像が拡大する方法 (画像を表示するために使用されるアニメーション) のため、それは不可能です。

私が考えることができる唯一の選択肢はSVGです。

4

6 に答える 6

3

マスク、クリップパス、またはフィルターを使用して、SVG でこれを行うことができます。これは、相対サイズの Clip-path を使用した例で、どのサイズのコンテンツでも機能します。

ここに画像の説明を入力

<svg width="900" height="600" viewBox="0 0 900 600"
     xmlns="http://www.w3.org/2000/svg" version="1.1"
     xmlns:xlink="http://www.w3.org/1999/xlink">
    <defs>
      <clipPath id="sawtoothClip" clipPathUnits="objectBoundingBox">
        <path d="M .00 0.025         
         l 0.025 0.025  l -0.025 0.025   l 0.025 0.025  l -0.025 0.025   l 0.025 0.025  l -0.025 0.025   l 0.025 0.025  l -0.025 0.025   l 0.025 0.025  l -0.025 0.025   l 0.025 0.025  l -0.025 0.025   l 0.025 0.025  l -0.025 0.025   l 0.025 0.025  l -0.025 0.025   l 0.025 0.025  l -0.025 0.025   l 0.025 0.025  l -0.025 0.025   l 0.025 0.025  l -0.025 0.025   l 0.025 0.025  l -0.025 0.025   l 0.025 0.025  l -0.025 0.025   l 0.025 0.025  l -0.025 0.025   l 0.025 0.025  l -0.025 0.025   l 0.025 0.025  l -0.025 0.025   l 0.025 0.025  l -0.025 0.025   l 0.025 0.025  l -0.025 0.025   l 0.025 0.025  l -0.025 0.025   l 0.025 0.025  
         l 0.025 -0.025 l 0.025 0.025    l 0.025 -0.025 l 0.025 0.025   l 0.025 -0.025 l 0.025 0.025   l 0.025 -0.025 l 0.025 0.025   l 0.025 -0.025 l 0.025 0.025   l 0.025 -0.025 l 0.025 0.025   l 0.025 -0.025 l 0.025 0.025   l 0.025 -0.025 l 0.025 0.025   l 0.025 -0.025 l 0.025 0.025  l 0.025 -0.025 l 0.025 0.025  l 0.025 -0.025 l 0.025 0.025  l 0.025 -0.025 l 0.025 0.025  l 0.025 -0.025 l 0.025 0.025  l 0.025 -0.025 l 0.025 0.025  l 0.025 -0.025 l 0.025 0.025  l 0.025 -0.025 l 0.025 0.025  l 0.025 -0.025 l 0.025 0.025  l 0.025 -0.025 l 0.025 0.025  l 0.025 -0.025 l 0.025 0.025  l 0.025 -0.025   
         l -0.025 -0.025 l 0.025 -0.025  l -0.025 -0.025 l 0.025 -0.025  l -0.025 -0.025 l 0.025 -0.025  l -0.025 -0.025 l 0.025 -0.025  l -0.025 -0.025 l 0.025 -0.025  l -0.025 -0.025 l 0.025 -0.025  l -0.025 -0.025 l 0.025 -0.025  l -0.025 -0.025 l 0.025 -0.025  l -0.025 -0.025 l 0.025 -0.025  l -0.025 -0.025 l 0.025 -0.025  l -0.025 -0.025 l 0.025 -0.025  l -0.025 -0.025 l 0.025 -0.025  l -0.025 -0.025 l 0.025 -0.025  l -0.025 -0.025 l 0.025 -0.025  l -0.025 -0.025 l 0.025 -0.025  l -0.025 -0.025 l 0.025 -0.025  l -0.025 -0.025 l 0.025 -0.025  l -0.025 -0.025 l 0.025 -0.025  l -0.025 -0.025 l 0.025 -0.025              
         l -0.025 -0.025 l -0.025 0.025  l -0.025 -0.025 l -0.025 0.025  l -0.025 -0.025 l -0.025 0.025  l -0.025 -0.025 l -0.025 0.025  l -0.025 -0.025 l -0.025 0.025  l -0.025 -0.025 l -0.025 0.025  l -0.025 -0.025 l -0.025 0.025  l -0.025 -0.025 l -0.025 0.025  l -0.025 -0.025 l -0.025 0.025  l -0.025 -0.025 l -0.025 0.025  l -0.025 -0.025 l -0.025 0.025  l -0.025 -0.025 l -0.025 0.025  l -0.025 -0.025 l -0.025 0.025  l -0.025 -0.025 l -0.025 0.025  l -0.025 -0.025 l -0.025 0.025  l -0.025 -0.025 l -0.025 0.025  l -0.025 -0.025 l -0.025 0.025  l -0.025 -0.025 l -0.025 0.025  l -0.025 -0.025 l -0.025 0.025  l -0.025 -0.025 l -0.025 0.025 
         z"
        />
      </clipPath>
    </defs>

   <image x="0" y="0" width="900" height="600"  preserveAspectRatio="none" clip-path="url(#sawtoothClip)"
     xlink:href="http://4hdwallpapers.com/wp-content/uploads/2013/05/Nature-Blue-Sky-Wallpaper.jpg"/>

</svg>

これはクロスブラウザー (IE9+) で動作します: http://codepen.io/mullany/pen/eylzt

于 2013-10-25T03:06:42.427 に答える
0

不完全ではありますが、もう 1 つの解決策があります。

HTML

<div id="aux-container">
    <div id="test-area"></div>
</div>

CSS

#aux-container {
  background: -webkit-linear-gradient(top, #fd7465 0%,#cf0404 100%); width: 200px; height: 200px; overflow: hidden;
}

#test-area {
  background: -webkit-linear-gradient(top, #2d3576 0%,#818cdf 100%); width: 160px; height: 160px; margin: 20px;

  -webkit-clip-path: polygon(0 100%, 0px 0px, 20px 20px, 40px 0, 60px 20px, 80px 0, 100px 20px, 120px 0, 140px 20px, 160px 0, 160px 100%);
}

http://jsbin.com/emOKIgU/1/

このソリューションの欠点は、要素が下の境界線である場合、要素の高さを知る必要があることです。JavaScript と組み合わせて (要素のサイズを計算し、CSS を更新するため)、これは機能します。

于 2013-10-24T17:50:07.650 に答える
-1

これが可能な解決策です。ひし形の PNG を使用し、コンテナー内の複数の背景として設定します。ダイヤモンドがエッジを適切に埋めるように、ダイヤモンドをスケーリングする方法を考え出す必要があります (おそらく SASS を使用しますか?)。

ダイヤモンドをエッジに沿って繰り返すように設定します。

簡単な例を次に示します: http://codepen.io/KurtWM/pen/tnzwj

ここに画像の説明を入力

そして、これがそのSASSコードです。は#container単なる DIV です。

$diamondImage: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEkAAABJCAYAAABxcwvcAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAd5JREFUeNrs2MtNxDAQBuD82wCtQAfcKWEvUBlcKIH7drC0sh2QSOHAksSveXnGv2RZ9vHTyB57mgzl6ev8sIzJWGAJaJ4u6/L5+vJ5G0jbQI/r1rclKBgEmqxBwSiQKSgYBjIDBeNAJqDQAZA6FDoBUoVCR0BqUOgMSAUKHQKJQ6FTIFEodAwkBoXOgUSg4ACIHQpOgFih4AiIDQrOgFig4BCIHApOgUih4BiIDArOgUigEACoGQpBgJqgEAioGgrBgKqgEBCoGApBgYqgEBgoGwrBgbKgMIDSUBhAaSgMoDQUBlAaCgMoDXUaQLtZTC5LEZ1WsZGdaloq6fdMep+n12HyJx8z0Nv97TagNoC2+qQBdQe013FHhvoHdPR2iwi1CZT6BYgEtQt0iBQI6hAoiRQAKgmUheQYKgsoG8khVDZQEZIjqCKgYiQHUMVAVUgdQ1UBVSN1CFUN1ITUEVQTUDNSB1DNQCRIhqFIgMiQDEKRAZEiGYIiBSJHMgBFDsSCpAjFAsSGpADFBsSKJAjFCsSOJADFDiSCxAglAiSGxAAlBiSKRAglCiSORAAlDqSC1AClAqSGVAGlBqSKVAClCqSOlAGlDmQC6QDKBJAZpA0oM0DmskCtWKbyI8AAeriJOZujgcgAAAAASUVORK5CYII=);

#container {
  width: 400px;
  height: 300px;
  border: 8px solid #31b55b; // border matches the diamond color.
  background: 
    $diamondImage repeat-x -15px -15px, 
    $diamondImage repeat-x -15px 285px,  
    $diamondImage repeat-y 385px -15px,  
    $diamondImage repeat-y -15px -15px,
  url(http://placekitten.com/g/400/300) no-repeat;
  // Had to play with these numbers a bit to get a nice fit.
  background-size: 31px 31px, 31px 31px, 30px 30px, 30px 30px, 100% 100%;
}

// It may be possible to use calculations within SASS to set the diamond size, based on the picture dimensions. For example: if you know the size of the image, or the percentage that the image is to its parent, you should be able to calculate a balanced size for the diamonds so that they will fit the edges nicely.

複数の背景が機能する方法に慣れていない場合。パラメータはコンマで区切ります。backgroundこれは、省略形のプロパティを使用する場合に最も簡単です。プロパティの場合、background-sizeこれらの値の省略形には場所がないため、コンマで区切られた複数の値も入れて、省略形のプロパティと同じ順序になっていることを確認する必要があります。

于 2013-10-24T20:36:46.393 に答える