css 三角

css border实现三角形绘制(带阴影)

by caoshengxiang

HTML

<h1>带阴影的三角</h1>
<div class="box"></div>

CSS

.box {
      position: absolute;
      display: inline-block;
      top: 380px;
      left: 300px;
      width: 0;
      height: 0px;
      content: '';
      border-style: solid;
      border-width: 20px;
      border-color: red green transparent transparent;
      /* transform: rotate(135deg); */
      box-shadow: 2px -2px 2px #000;
    }