您现在的位置:首页 >> 前端 >> 内容

写出边框的倒三角形

时间:2016/12/8 13:42:03 点击:

  核心提示://html页面:p class=demo/pcss代码:body {background-color: #fff;}.demo {position: relative;width: 0;height...
//html页面:
<p class="demo"></p>

css代码:
body {
  background-color: #fff;
}
.demo {
  position: relative;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 10px 20px 10px;
  border-color: transparent transparent #999 transparent;
}
.demo::before {
  position: absolute;
  content: '';
  top: 1px;
  left: -9.5px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 9.5px 19px 9.5px;
  border-color: transparent transparent #ffffff transparent;
}

![这里写图片描述](https://img.blog.csdn.net/20161208114636314?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvdTAxMzAxODM1Nw==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)

作者:网络 来源:u013018357