在div下创建一个三角形附录？

Question

我收到了设计师的设计，我想知道这是否可以使用HTML，CSS或JavaScript？

这似乎可以使用CSS并在主div上创建一个单独的div，位置绝对。

但是，如果我在div上使用背景图片，设计师希望它看起来如下：

老实说，我不知道如何为此寻找解决方案，有没有办法实现这个目标？

Answer 1

这是css三角形的一个快速小东西 - 你可以调整以适应：

＆＃13;

＆＃13;

.createdDiv{
  height:100px;
  margin-top:10px;
  background:#ddd;
}

.createdDiv:before{
    content: "";
    border-top: 15px solid white;
    border-right: 15px solid transparent;
    border-left: 15px solid transparent;
    position: absolute;
    top: 10px;
    right: 50%;
    margin-right:-10px;
    z-index:99;
}

＆＃13;

<div class='createdDiv'></div>

＆＃13;

＆＃13;

＆＃13;