Question

我在photoshop中做过些什么。你可以在这里看到图片：

背景中的三个三角形指的是我网站上的3个不同页面。我想知道是否有可能将这样的图像放在CSS中，因为我希望它们像链接一样工作，当你将鼠标悬停在它上面时放一些简单的缩放动画。我实际上是非常棒的CSS和整体上的新手，所以如果不进行大量的研究就很难做到，但我希望你们能帮助我并给我一个开始的方法。感谢任何帮助，非常感谢！

为了清楚起见，3个三角形应该成为3张单独的图片。如果重要的话，我被迫在学校使用flexbox。再次感谢。

Answer 1

所以这是一篇关于如何在CSS中创建它的草稿。基本上我制作了三个正方形（.triangle到.triangle3），给它们一个旋转（transform: rotate(45deg);）并向每个正方形添加了一个透明度（background-image: linear-gradient( to top left, red, transparent 50%);）的渐变。这会创建基本的三角形形状，因为如果它们大到足以越过视口，则隐藏正方形的其他两半。我使用position: absolute;将元素放在彼此旁边。

我没有使用flexbox，但我不认为在这种情况下使用flexbox是正确的。

另一点需要指出：如果你不想要45°角，你也可以使用transform:skew。它会扭曲元素，并为您提供创建不同角度的可能性。 This是一个很好的资源。

body {
  background: black;
  position: relative;
  width: 475px;
}

.triangle {
  height: 200px;
  width: 200px;
  transform: rotate(135deg);
  background-image: linear-gradient(rgba(0, 255, 0, 1), rgba(0, 255, 0, 0));
  position: absolute;
  left: 0;
  margin-top: 30%;
}

.triangle2 {
  height: 200px;
  width: 200px;
  transform: rotate(-135deg);
  background-image: linear-gradient(rgba(0, 0, 255, 1), rgba(0, 0, 255, 0));
  position: absolute;
  right: 0;
  margin-top: 30%;
}

.triangle3 {
  height: 200px;
  width: 200px;
  transform: rotate(45deg);
  background-image: linear-gradient( to top left, red, transparent 50%);
  position: absolute;
  right: 0;
  left: 0;
  margin: 0% auto;
}

.wrapper {
overflow: hidden;
}

<div class="triangle"></div>
<div class="triangle2"></div>
<div class="triangle3"></div>

Answer 2

您可以使用渐变，阴影和混合混合模式，但最好和最有效的是SVG。例如，如果您想花几个小时画出形状，那就开始了。

＆＃13;

.img {
  float:left;
  background:
    radial-gradient(circle at bottom center, transparent 20%, black 90%),
    linear-gradient( 50deg, rgba(125, 60, 213, 0.7) 32%, transparent 32.5% ),
    linear-gradient(-50deg, rgba(0, 108, 179, 0.7) 32%, transparent 32.5%) #000;
  min-width:400px;
}
.img:before {/* to keep ratio*/
  content:'';
  float:left;
  padding-top:66.66%;
}
.img:after {/* to draw stars spots */
  content:'';
  display:block;
  height:2px;
  width:2px;
  border-radius:50%;
  box-shadow: 50px 10px 1px  white, 55px 11px 1px  white, 45px 12px 1px  white, 40px 25px 1px  white;
}
.moon {
  float:left;
  margin:10% 1%;
  width:9%;
  padding-top:9%;
  box-shadow:0.30em 0.30em 0 0.25em gold ;
  border-radius:50%;
}
.star {
  position:relative;
  float:left;
  width: 2.5%;
  padding-top:1.25%;
  margin:3em;
  transform:rotate(-20deg);
}
.star:before , .star:after{
  content:'';
  position:absolute;
  top:0;
  left:0;
  background:linear-gradient(45deg, rgb(247, 237, 135),gold);
  height:100%;
  width:100%;
  transform:skew(50deg) rotate(10deg)
}
.star:after {  
  transform:skew(-50deg) rotate(50deg)
}

＆＃13;

<div class="img">
  <b class="moon"></b>
  <b class="star"></b>
</div>

＆＃13;

Answer 3

您可以使用以下工具转换base64中的图片（或单个元素）：https://www.base64-image.de/

这是将事物编码为html的最古老的方法之一（1987年首次提出！）。这是一种将不同类型的数据转换为一系列对HTML安全的字母和数字的方法。其中一种数据类型是图像。

我无法在此处粘贴示例代码，因为它太长了。

Answer 4

你可以创建一个div容器，它将包含背景背景的图像，然后你只需添加div位于里面，感谢位置：absolute;使用顶部，底部，右侧，左侧。像这样：

＆＃13;

.container {
  background-image:url("https://i.stack.imgur.com/8bUXt.png");
  width:500px;
  height:500px;
   }
.triangle1 {
  position:absolute;
  top:0px;
  left:0px;
}
.triangle2 {
  position:absolute;
  top:100px;
  left:50px;
}
.triangle3 {
  position:absolute;
  top:300px;
  left:300px;
}

＆＃13;

<div class="container">
  <div class="triangle1">
      <img src="https://alexanderssteak.com/wp-content/uploads/2016/05/starfav.png" alt="">
  </div>
  <div class="triangle2">
      <img src="https://alexanderssteak.com/wp-content/uploads/2016/05/starfav.png" alt="">
  </div>
  <div class="triangle3">
      <img src="https://alexanderssteak.com/wp-content/uploads/2016/05/starfav.png" alt="">
  </div>
  
</div>

＆＃13;

可以在CSS中制作这个图像吗？

4 个答案: