我可以在CSS中创建吗？如果是这样，怎么样？

Question

这种设计在CSS中是否可行？如果是这样，我该怎么做呢？

请注意，白色是设计的“底部”部分，它覆盖在图像的顶部。

Answer 1

是的，有一种方法，使用剪辑路径。在codepen上：http://codepen.io/marcellods/pen/lwqAJ

HTML：                            

  <div class="masked">
    <img  src="http://lorempixel.com/480/260/sports/" alt="">
  </div>
</div>

CSS：

.masked img {
  -webkit-clip-path: polygon(
    100% 0, 100% 75%, 50% 100%, 0 75%, 0 0
  );
  -moz-clip-path: polygon(
    100% 0, 100% 75%, 50% 100%, 0 75%, 0 0
  );
    -ms-clip-path: polygon(
    100% 0, 100% 75%, 50% 100%, 0 75%, 0 0
  );
    clip-path: polygon(
    100% 0, 100% 75%, 50% 100%, 0 75%, 0 0
  );
}

.page {
  padding: 10%;
  background-color: #47BCDA;
  width: 80%;
  height: 80%;
}

.masked + .masked {
  margin-top: 20px;
}

http://www.html5rocks.com/en/tutorials/masking/adobe/对这件事的好读 另一个具有剪辑路径形状的codepen：http://codepen.io/Darsain/pen/IqjFe

希望它有所帮助。

Answer 2

你绝对可以，但它可能不值得。当简单的bg图像能够很好地工作时，额外的代码太多了。

如果你必须使用CSS，请制作一些正确的z-indexed div并使用transform: rotate(25deg);旋转它们

Answer 3

实现这一目标的方法不止一种。您甚至可以使用边框三角形并相应地定位它们。但是这值得吗？不，只是做一个形象的人。