三角形css_CSS实现三角形

最新推荐文章于 2024-06-19 14:48:22 发布

weixin_39970855

最新推荐文章于 2024-06-19 14:48:22 发布

阅读量85

点赞数

文章标签：三角形css

本文链接：https://blog.csdn.net/weixin_39970855/article/details/111380756

版权

生而为人，喜丧并存三角形是我们开发中比较常用到的一个图标，比如树形菜单右侧的点击展开按钮为向右的三角形，点击展开后又会变为向下的三角形。那么怎么简单实现一个三角形呢？

<html lang="en"><head>  <meta charset="UTF-8">  <title>Documenttitle>  <style type="text/css">    *{      margin: 0;      padding: 0;    }    span{      display: block;      width: 0;      height: 0;      border:20px solid transparent;      border-left-color:red;    }style>head><body>  <span>span>body>html>

只需要一个span标签即可，因为span是内联元素，我们首先把它转为块元素或内联块元素，然后设置宽高都为0，然后利用边框让元素本身可以显示，边框颜色都设置为透明，然后单独设置一边的边框为我们需要的颜色即可。需要注意的是：left控制向右的箭头，right控制向左的箭头，top控制向上的箭头，bottom控制向下的箭头。效果如下：