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

【问题标题】：Custom CSS shape with borders and background image带有边框和背景图像的自定义 CSS 形状
【发布时间】：2016-09-01 03:08:12
【问题描述】：

大家好，我只想在 css/sass 中做到这一点！边框必须在翻转时更改，背景可能是图像！我尝试了SVG和clipPath，transform3d没有任何成功！示例在这里

【问题讨论】：

你想让它在所有浏览器中都能工作吗？

标签： css html sass css-transforms clip-path

【解决方案1】：

创建容器 div 并使用 CSS 中的变换为整个元素提供 3d 效果。您可以查看此内容并根据自己的喜好使用这些值。

将背景图片设为容器 div 的背景以保持简洁。

使用 SVG 绘制控制器图标。那里有一些关于如何使用 GIMP 导出 SVG 路径的教程，至少我是这样处理复杂形状的。

【讨论】：

控件图标没有问题...如果我使用 css 变换形状，它会扭曲背景图像，看起来不太好看！ :(
所以你想让边框有3d效果而不是背景图？
我有一个解决方案，我稍后会在这里发布！但它似乎很完美！

【解决方案2】：

好的，最好这样做，首先是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

【讨论】：

【解决方案3】：

我们找到了解决方法。它需要一些调整，但看起来很适合我们的需要！

<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

【讨论】：