您的位置：首页 > Web前端 > CSS

CSS中易迅网三角形的制作

2016-08-31 22:18 357 查看

购物网站上的三角形非常常见，那么我们该如何实现呢，比如我们要实现易迅网上那种倒三角，如下图

首先如果一个盒子我们把它的宽高都设置为0，边框分别设置10个像素不同的颜色，我们看看会出现什么情况？

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
div {
width: 0;
height: 0;
border-top: 10px solid red;
border-right: 10px solid yellow;
border-bottom: 10px solid blue;
border-left: 10px solid green;
}
</style>
</head>
<body>
<div></div>
</body>
</html>

奇迹出现了，上下左右全是三角形

通过上面的结果我们可以很快的实现易迅网上那种倒三角，只需要将其它的边框设置为透明这样就可以实现一个倒三角，最后使用子绝父相的方法让三角形位于合适的位置，这样我们就实现了易迅网中的那种三角形

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
div {
position: relative; /*相对定位*/
}
span {
width: 0;
height: 0;
display: inline-block;
/*设置边框宽度为5px，上边框为红色，其它为透明，并且为实线*/
border-width: 5px;
border-color: red transparent transparent transparent;
border-style: solid;
position: absolute; /*绝对定位*/
top: 6px;
}
</style>
</head>
<body>
<div>
送至深圳<span></span>
</div>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： html css 前端三角形的制作

相关文章推荐

新的分享

章节导航