css 三角

css border实现三角形绘制

by caoshengxiang

HTML

<h1>上</h1>
<div class="top"></div>

<h1>下</h1>
<div class="bottom"></div>

<h1>左</h1>
<div class="left"></div>

<h1>右</h1>
<div class="right"></div>

<h1>带阴影</h1>
<div class="shadow"></div>

CSS

.top {
  width: 0px;
  height: 0px;
  border-right: 50px solid transparent;
  border-bottom: 50px solid blue;
  border-left: 50px solid transparent;
}
.bottom {
      width: 0px;
      height: 0px;
      border-top: 50px solid black;
      border-right: 50px solid transparent;
      border-left: 50px solid transparent;
    }
.left {
  width: 0px;
  height: 0px;
  border-top: 50px solid transparent;
  border-right: 50px solid red;
  border-bottom: 50px solid transparent;
}
.right {
      width: 0px;
      height: 0px;
      border-top: 50px solid transparent;
      border-bottom: 50px solid transparent;
      border-left: 50px solid orange;
    }
    
    /* 带阴影 */
.shadow {
  margin: 20px;
      position: relative;
      width: 300px;
      height: 300px;
      background-color: #fff;
      padding: 10px;
      box-shadow: #888 0px 0px 10px;
}
.shadow:after{
        content: '';
        display: block;
        width: 0;
        height: 0;
        position: absolute;
        top: 12px;
        left: -10px;
        border-top: 10px solid #fff;
        border-bottom: 10px solid transparent;
        border-right: 10px solid #fff;
        border-left: 10px solid transparent;
        box-shadow: 2px -2px 2px #888;
        transform: rotate(-135deg);
      }