css 三角

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

by caoshengxiang

HTML

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

<h2>第二种</h2>
<div class="box2"></div>

CSS

.box {
      position: relative;
      width: 600px;
      height: 400px;
      background: #fff;
      border: 1px solid #ccc;
      box-shadow: 2px 2px 2px #ccc;
    }
    .box:after {
      position: absolute;
      display: inline-block;
      top: 380px;
      left: 300px;
      width: 0;
      height: 0px;
      content: '';
      border-style: solid;
      border-width: 20px;
      border-color: #fff #fff transparent transparent;
      transform: rotate(135deg);
      box-shadow: 2px -2px 2px #ccc;
    }
    
    .box2{
    float:left;
    position:relative;
    width:100px;
    height:100px;
    border:1px solid red;
    margin-left:50px;
    margin-right:50px;
    margin-top:20px;
    margin-bottom:20px;
    box-sizing:border-box;
    font-size:14px;
    padding:10px;
    box-shadow:0 0 2px rgba(0,0,0,.5)
  }
  .box2:before,
  .box2:after{
    position:absolute;
    content:'';
    width:14px;
    height:14px;
    bottom:-8px;
    left:50%;
    margin-left:-7px;
    overflow:hidden;
    pointer-events:none;
    -webkit-transform:rotate(45deg);
    -mz-transform:rotate(45deg);
    transform:rotate(45deg);
  }
  .box2:before{
    background:red;
    box-shadow:1px 1px 2px rgba(0,0,0,.5)


  }
  .box2:after{
    bottom:-7px;background:#fff;
  }