html+css实现三角形
发布于2021-01-31 17:06 阅读(1408) 评论(0) 点赞(12) 收藏(0)
介绍
通过 html + css , 实现不同方向的三角形
效果图
需求背景
现在经常会发现很多网页上的导航, 分类页等页面, 都会使用一个三角符号去指向内容，效果简洁美观 ; 并且现在很多的前端面试中, 也会问到怎么在网页当中实现一个三角的符号，所以自己做了, 各个方向的三角符号, 记得收藏哦~
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>小三角</title>
<style>
.index {
height: 200px;
width: 500px;
margin: 50px auto;
background-color: #ddd;
}
.up{
width:0px;
height:0px;
border-bottom:30px solid #fff;
border-left:15px solid transparent;
border-right:15px solid transparent;
margin:10px auto;
}
.down{
width:0px;
height:0px;
border-top:30px solid #fff;
border-left:15px solid transparent;
border-right:15px solid transparent;
margin:10px auto;
}
.left{
width:0px;
height:0px;
border-right:30px solid #fff;
border-top:15px solid transparent;
border-bottom:15px solid transparent;
margin:10px auto;
}
.right{
width:0px;
height:0px;
border-left:30px solid #fff;
border-top:15px solid transparent;
border-bottom:15px solid transparent;
margin:10px auto;
}
</style>
</head>
<body>
<div class="index">
<!-- 正三角 -->
<div class="up"></div>
<!-- 倒三角 -->
<div class="down"></div>
<!-- 左边三角 -->
<div class="left"></div>
<!-- 右边三角 -->
<div class="right"></div>
</div>
</body>
</html>
所属网站分类: 技术文章 > 博客
作者：前端大师
链接：http://www.qianduanheidong.com/blog/article/176/132f310e843447c046e3/
来源：前端黑洞网
任何形式的转载都请注明出处,如有侵权 一经发现 必将追究其法律责任
昵称:
评论内容：(最多支持255个字符)
---无人问津也好，技不如人也罢，你都要试着安静下来，去做自己该做的事，而不是让内心的烦躁、焦虑，坏掉你本来就不多的热情和定力