CSS伪元素实现三角形

什么是伪元素：
    css的伪元素，之所以被称为伪元素，是因为他们不是真正的页面元素，html没有对应的元素，但是其所有用法和表现行为与真正的页面元素一样，可以对其使用诸如页面元素一样的css样式，表面上看上去貌似是页面的某些元素来展现，实际上是css样式展现的行为，因此被称为伪元素。

css有一系列的伪元素，如:before，:after，:first-line，:first-letter等。

1、CSS部分

.triangle{
    width: 200px;
    height: 100px;
    border-radius: 5px;
    border: 2px solid #000;
    position: relative;
 }
 .triangle:after{
    content: "";
    position: absolute;
    left: 200px;
    top:12px;
    width: 0;
    height: 0;
    border-top: 10px solid transparent;
    border-left: 10px solid #fff;
    border-right: 10px solid transparent;
    border-bottom: 10px solid transparent;
 }
 .triangle:before{
    content: "";
    position: absolute;
    left: 200px;
    top:10px;
    width: 0;
    height: 0;
    border-top: 12px solid transparent;
    border-left: 12px solid #000;
    border-right: 12px solid transparent;
    border-bottom: 12px solid transparent;
  }

2、html部分 一个div就可以搞定

3、效果图