css三角形

今天我们来聊一聊怎么通过css来绘制一个三角形的。原理就是border属性的应用。

首先定义一下HTML结构

<div class="box"></div>

然后给box添加样式

.box{
  width:200px;
  height:60px;
  border:1px solid #333;
  position:relative;
  margin:50px;
}

我们通过伪类after来添加小三角

.box:after{
  content:'';
  position:absolute;
  top:-20px;
  left:10px;
  width:0;
  height:0;
  border:10px solid transparent;
  /*上*/
  border-bottom-color:#333;
  /*下*/
  /*border-top-color:#333;*/
  /*右*/
  /*border-left-color:#333;*/
  /*左*/
  /*border-right-color:#333;*/
}

如下：

大功告成，简单吧，但是这是一个实心的三角，很多时候我们可能需要的是一个空心的，怎么办，其实也简单，只要再加一个三角形，位置偏下，覆盖之前的三角，就会漏出边框类似的。

.box:before{
  content:'';
  position:absolute;
  top:-19px;
  left:10px;
  width:0;
  height:0;
  border:10px solid transparent;
  border-bottom-color:#fff;
  z-index:1;
}

 

今天的学习就到这里，想要学习更多的前端小知识，可以关注我，每周不定时发布3-5篇。