CSS实现三角形
2020-09-03 本文已影响0人
坏丶毛病
三角形是我们在开发中常用的，比如点击展开某个树状菜单，右边本来是向右的小箭头，然后变为向下，类似的 场景很多。
那么怎么简单的用css实现一个三角形呢？
话不多说，上代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
span{
display: block;
margin: 20px auto;
width: 0;
height: 0;
border:20px solid transparent;
border-left-color:red;
}
</style>
</head>
<body>
<span></span>
</body>
</html>
效果：
image
只需要一个span标签即可，因为span是内联元素，我们首先把它转为块元素或内联块元素，然后设置宽高都为0，然后利用边框让元素本身可以显示，边框颜色都设置为透明，然后单独设置一边的边框为我们需要的颜色即可。
需要注意的是：left控制向右的箭头，right控制向左的箭头，top控制向上的箭头，bottom控制向下的箭头。
之后点击只需要改变css中的边框方向就可以了。
好了，以上就是css实现简单的三角效果。
如有问题，请指出，接受批评。
