三角形等的css问题

Question

我被要求为我的客户创建一个交互式徽标，其具体内容如下：

• 它已经反应灵敏
• 这是一个徽标，徽标开头清晰，随着可点击项的出现而逐渐消失
• 在第二张图像中，如果我将鼠标悬停在特定的部分，则必须更改颜色以反映之前的颜色

我的问题是，这个徽标是由三角形制成的，我不知道该如何解决

也许我的程序完全错了

 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

有很多方法可以做到这一点，但我认为最好的方法是使用生成器，它只是一个矩形。 您在CSS中不需要任何特定的边界半径甚至不需要特定的变换。 它只是一个三角形，还是不规则的三角形？

您是否曾经在CSS多边形，圆形，正方形等中尝试过？

shape-outside: polygon()

CSS可以根据您的形状获取形状和您的单词。 也读了这个

塑造Div

成形div生成器lvl easy