Question

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

它有回应
它的标识在开头有清晰的图片，在另一个用可点击的项目淡出
在第二张图片中，如果我悬停特定部分，则必须更改颜色以反映之前的颜色

我的问题是这个徽标是由三角形组成的，我不知道如何处理这个

也许我的手术完全错了

＆＃13;

OT   81
UK    0
US   68

＆＃13;

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;
  }
}

＆＃13;

Answer 1

很多方法可以做到这一点，但我认为最好的事情是使用发电机，它只是一个矩形。你不需要任何特定的边界半径甚至CSS中的特定变换。它只是一个三角形右边，还是一个未成形的三角形？

你有没有尝试过css polygon，circle，square等？

shape-outside: polygon()

用于塑造形状的CSS和符合形状的文字。还看了这个

Shaping the Div

Shaping div generator lvl easy

三角形等css的问题

1 个答案: