如何使用css组成箭头？

Question

我是css的新手你们可以帮助我制作自定义箭头： 下面是我的html div，只有一个div我想在css属性之前和之后使用箭头：

    <div class="triangle-with-shadow"></div>

Answer 1

我们尝试使用以下CSS代码：

.triangle-with-shadow {
  width: 100px;
  height: 100px;
  position: relative;
  z-index: 5;
}
.triangle-with-shadow:after {
  content: "";
  position: absolute;
  width: 50px;
  height: 50px;
  background: white;
  border: 1px solid;
  transform: rotate(45deg);
  top: 75px;
  left: 25px;
  border-width: 1px 0 0 1px;
}
.triangle-with-shadow:before {
    width: 100px;
    background: white;
    height: 100px;
    position: absolute;
    content: "";
    top: 100px;
    border: 1px solid;
}