Forme CSS personnalisée avec bordures et image de fond

Question

Bonjour, j'essaie de faire cela en css/sass uniquement ! La bordure doit changer au moment du rollover et l'arrière-plan peut être une image ! J'ai essayé SVG et clipPath, transform3d sans aucun succès!Exemple ici

Answer 1

Créez le conteneur div et utilisez les transformations en CSS pour donner à l'élément entier l'effet 3D. Vous pouvez consulter cette page et jouer avec les valeurs à votre convenance.

Faites en sorte que l'image d'arrière-plan soit l'arrière-plan de la division conteneur pour rester simple.

Utilisez un SVG pour dessiner l'icône du contrôleur. Il existe des tutoriels sur la façon d'exporter un chemin pour un SVG en utilisant GIMP, du moins c'est ce que je fais pour les formes compliquées comme celle-ci.

Answer 2

Ok, c'est mieux de faire comme ça, d'abord la structure 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>

Cela signifie que vous avez un div conteneur et que vous placez votre img dans ce conteneur. Il est important que l'img ne soit pas l'arrière-plan du div dans ce cas.

Deuxièmement, positionnez le div de manière relative, l'image de manière absolue, ce qui ne fonctionnera que si l'image est positionnée de manière absolue.

Maintenant, déclarez un chemin de clip, il y a des générateurs pour différentes formes avec des aperçus etc, vérifiez le codepen pour les déclarations correctes.

Donnez une transition au chemin du clip, assurez-vous d'utiliser les préfixes.

Maintenant, c'est à vous de décider si vous voulez déclencher l'animation au survol, ce qui peut être fait avec css. Si vous voulez que les animations soient déclenchées au clic, vous pouvez le faire en JS et changer les chemins des clips avec JS.

Je pense que l'animation de la bordure n'a pas besoin d'explication, c'est la partie la plus facile, si vous avez besoin d'aide avec ça, faites-le moi savoir.

Voici le lien, survolez l'image et voyez :-)

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

Answer 3

Il y a la solution de contournement que nous avons trouvée. Elle nécessitera quelques ajustements, mais elle répond bien à nos besoins !

<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