html - 三 Angular 形等的CSS问题

Question

我被要求为我的客户创建一个具有以下细节的交互式 Logo :

• 它有响应
• 这是一个标志，开头有一张清晰的图片，然后在另一个带有可点击元素的图片中淡出
• 在第二张图片中，如果我将鼠标悬停在特定部分，它必须更改颜色以反射(reflect)之前的颜色

我的问题是这个标志是由三 Angular 形组成的，我不知道如何解决这个问题

也许我的程序完全错了

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 中进行特定的转换。它只是一个直 Angular 三 Angular 形，还是未成形的三 Angular 形？

你有没有在 css 多边形、圆形、正方形等中尝试过这个？

shape-outside: polygon()

CSS 来获得形状和你的单词跟随你的形状。还读了这个

Shaping the Div

Shaping div generator lvl easy