ボーダーと背景画像を持つカスタムCSSシェイプ

Question

こんにちは、私はCSS/Sassでこれをやろうとしています！ロールオーバー時に境界線を変更する必要があり、背景がイメージになる可能性があります。私はここで

Answer 1

:-)参照、リンクです。それはいくつかの調整が必要ですが、私たちの必要性に見えます！

<a href=""> 
     <svg class="stroke-path" height="100%" width="100%"> 
      <defs> 
       <pattern id="img1" patternUnits="userSpaceOnUse" width="100%" height="100%"> 
        <image xlink:href="http://cdn.collider.com/wp-content/uploads/super-mario-bros.jpg" x="0" y="0" width="100%" height="100%" /> 
       </pattern> 
      </defs> 
      <path id="mlp2" d="M206.5,173.1L33.3,162.5c-6.3,0-11.4-5.1-11.3-11.4c0,0,0,0,0,0L10.5,39.8c0-6.3,5.1-11.4,11.3-11.4 c0,0,0,0,0,0l208.2-17.9c6.3,0,11.4,5.1,11.3,11.4c0,0,0,0,0,0l-23.6,139.8C217.8,168,212.8,173.1,206.5,173.1 C206.5,173.1,206.5,173.1,206.5,173.1z" fill="url(#img1)" fill-opacity="1" /> 
     </svg> 
     <svg class="" height="100%" width="100%"> 
      <defs> 
       <filter id="f1" x="0" y="0" width="200%" height="200%"> 
        <feOffset result="offOut" in="SourceGraphic" dx="0" dy="0" /> 
        <feGaussianBlur result="blurOut" in="offOut" stdDeviation="8" /> 

- >

http://codepen.io/anon/pen/vXBPOz

Answer 2

例！任意の成功なしでSVGやクリップ経路、transform3dをしようとしたコンテナのdivを作成し、使用することは、全体の要素に3D効果を与えることをCSSに変換します。これを見て好みの値で遊ぶことができます。

コンテナdivの背景を単純に保つようにします。

コントローラアイコンを描画するには、SVGを使用します。 GIMPを使用してSVGのパスをエクスポートする方法についてはいくつかのチュートリアルがありますが、少なくともこれはこのような複雑な図形の場合の作業です。

Answer 3

[OK]を、これは最高のこの、最初のHTML構造のように行われます。これは、

<div id="imageContainer" class="center"> 
<h2>Lets go and see how it goes</h2> 
<img class="pic" src="https://moltopiccolo.files.wordpress.com/2012/01/cool-  drinks.jpg"> 
</div> 

、あなたは、コンテナのdivを持っており、その容器の中にあなたのimgを置き、ようIMGを持っていないことが重要ですこのインスタンスのdivの背景。

第2に、div相対、画像絶対を配置します。これは、画像が絶対配置されている場合にのみ機能します。

クリップパスを宣言し、プレビューなどを含むさまざまなシェイプのジェネレータが存在するので、正しい宣言のコードを確認してください。

クリップパスに移行する際は、必ずプレフィックスを使用してください。

これで、あなたはホバー上でアニメーションをトリガーしたいと思っています。これはCSSで行うことができます。クリック時にトリガーされるアニメーションをJSで行い、JSでクリップのパスを変更することができます。

ボーダーアニメーションは説明が不要だと思いますが、これは非常に簡単な部分です。もしあなたが助けを必要とするなら、教えてください。ここで

は、画像の上に置いて、私たちが見つかった回避策はあり

http://codepen.io/damianocel/pen/KdobyK