样式总结

三角形的画法

.triangle-up {
  width: 0px;
  height: 0px;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 100px solid yellowgreen;
}

.triangle-down {
  width: 0px;
  height: 0px;
  border-top: 100px solid yellowgreen;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
}

.triangle-left {
  width: 0px;
  height: 0px;
  border-top: 50px solid transparent;
  border-right: 100px solid yellowgreen;
  border-bottom: 50px solid transparent;
}
 <div class="triangle-left"></div>

.triangle-topleft {
  width: 0;
  height: 0;
  border-top: 100px solid yellowgreen;
  border-right: 100px solid transparent;
}

.triangle-bottomright {
  width: 0;
  height: 0;
  border-bottom: 100px solid yellowgreen;
  border-left: 100px solid transparent;
}

弹窗划出

.pdrawer_wrap {
  position: fixed;
  z-index: 98;
  box-sizing: border-box;
  top: 50px;
  left: -1200px;
  bottom: 0;
  width: 820px;
  background-color: #fff;
  transition: all 0.4s cubic-bezier(0, 0, 0.2, 1);
  box-shadow: 0px 4px 12px 0px rgba(192, 195, 204, 0.34);
}
.active {
  transition-delay: 0.15s;
  left: 280px;
}
<div class="pdrawer_wrap"></div>
$(function () {
  $("button").on("click", function () {
      $(".pdrawer_wrap").toggleClass("active");
  });
});