Probleme mit CSS für Dreiecken und so

Question

ich gebeten worden, habe ein interaktives Logo für meine Kunden mit diesen Besonderheiten zu erstellen:

• es reagiert
• es am Anfang ein Logo mit einem klaren Bild ist die verblasst in einem anderen mit den klickbare Elementen in diesem zweiten Bild
• wenn ich einen bestimmten Abschnitt es Farbe zu ändern hat schweben von dem einen zu reflektieren, bevor

Mein Problem ist, dass dieses logo ist aus Dreiecke und ich habe keine Ahnung, wie das

angehen

Vielleicht mit meinem Verfahren

body { 
 
    width: 500px; 
 
} 
 

 
#logo_mediaofficina { 
 
    position: relative; 
 
    display: block; 
 
    clear: both; 
 
    zoom: 0.3; 
 
} 
 

 
img.puzzler_01 { 
 
    position: absolute; 
 
    z-index: -1000 !important; 
 
    opacity: 0; 
 
    animation-name: fadeout; 
 
    -moz-animation-name: fadeout; 
 
    /* Firefox */ 
 
    -webkit-animation-name: fadeout; 
 
    /* Safari and Chrome */ 
 
    -o-animation-name: fadeout; 
 
    /* Opera */ 
 
    animation-duration: 5s; 
 
} 
 

 
img.puzzler_02 { 
 
    position: absolute; 
 
    opacity: 1; 
 
    z-index: 1000 !important; 
 
    animation-name: fadein; 
 
    -moz-animation-name: fadein; 
 
    /* Firefox */ 
 
    -webkit-animation-name: fadein; 
 
    /* Safari and Chrome */ 
 
    -o-animation-name: fadein; 
 
    /* Opera */ 
 
    animation-duration: 5s; 
 
} 
 

 
.categoria_homelogo { 
 
    position: absolute; 
 
    z-index: 3000; 
 
    opacity: 0.2; 
 
    left: 64%; 
 
    top: 268px; 
 
} 
 

 
.categoria_homelogo:hover { 
 
    opacity: 1; 
 
} 
 

 

 
/*keyframes*/ 
 

 
@keyframes fadeout { 
 
    from { 
 
    opacity: 1; 
 
    } 
 
    to { 
 
    opacity: 0; 
 
    } 
 
} 
 

 
@-moz-keyframes fadeout { 
 
    /* Firefox */ 
 
    from { 
 
    opacity: 1; 
 
    } 
 
    to { 
 
    opacity: 0; 
 
    } 
 
} 
 

 
@-webkit-keyframes fadeout { 
 
    /* Safari and Chrome */ 
 
    from { 
 
    opacity: 1; 
 
    } 
 
    to { 
 
    opacity: 0; 
 
    } 
 
} 
 

 
@-o-keyframes fadeout { 
 
    /* Opera */ 
 
    from { 
 
    opacity: 1; 
 
    } 
 
    to { 
 
    opacity: 0; 
 
    } 
 
} 
 

 

 
/*fadein*/ 
 

 
@keyframes fadein { 
 
    from { 
 
    opacity: 0; 
 
    } 
 
    to { 
 
    opacity: 1; 
 
    } 
 
} 
 

 
@-moz-keyframes fadein { 
 
    /* Firefox */ 
 
    from { 
 
    opacity: 0; 
 
    } 
 
    to { 
 
    opacity: 1; 
 
    } 
 
} 
 

 
@-webkit-keyframes fadein { 
 
    /* Safari and Chrome */ 
 
    from { 
 
    opacity: 0; 
 
    } 
 
    to { 
 
    opacity: 1; 
 
    } 
 
} 
 

 
@-o-keyframes fadein { 
 
    /* Opera */ 
 
    from { 
 
    opacity: 0; 
 
    } 
 
    to { 
 
    opacity: 1; 
 
    } 
 
}

<div id="mediaofficina_homepage"> 
 
    <!-- LOGO --> 
 
    <div id="logo_mediaofficina"> 
 
    <img class="puzzler_01" src="http://www.mediaofficina.it/images/homepage/Home-Media-01.png" /> 
 
    <div> 
 
     <img class="puzzler_02" src="http://www.mediaofficina.it/images/homepage/Home-Media-02.png" /> 
 
     <div class="categoria_homelogo"> 
 
     <a href="#"><img class="" src="http://www.mediaofficina.it/images/homepage/categorie_logo/Portfolio.png" /></a> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

Answer 1

viele Art und Weise völlig falsch Ich ging dies zu tun, aber ich denke, das Beste, was unter Verwendung Generator, es ist nur ein Rechteck. Sie benötigen keinen spezifischen Rahmenradius oder gar spezifische Transformation in Ihrem CSS. es ist nur ein Dreieck rechts oder ein ungeformtes Dreieck?

Haben Sie das jemals in CSS-Polygon, Kreis, Quadrat usw. probiert?

CSS, um Form und Ihre Wörter nach Ihrer Form zu bekommen. auch diese

lesen

Shaping the Div

Shaping div generator lvl easy