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>

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;
    }