带边框和背景图像的自定义CSS形状

Question

嗨，大家好我只是试图在CSS/sass中做到这一点！边界必须改变翻转和背景可能是一个图像！我试图SVG和clipPath，的Transform3D没有任何成功！这里举例

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

创建容器DIV和使用CSS变换给整个元素的3D效果。您可以查看这些信息，并根据自己的喜好玩这些值。

将背景图像作为容器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背景。

二，定位div相对，图像绝对。这只有在图像绝对定位时才有效。

现在声明一个剪辑路径，有不同形状的生成器与预览等，检查codepen是否正确的声明。

转换到剪辑路径，请确保使用前缀。

现在由你来决定是否要在悬停时触发动画，这可以用css完成。如果你想在点击时触发动画，你可以在JS中做到这一点，并用JS更改剪辑路径。

我觉得边框动画不需要解释，这是最简单的部分，如果你需要帮助，请告诉我。

这里是链接，将鼠标悬停在图片，看看:-)

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