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

页面中产生小三角块的样式

2017-07-23 20:30 134 查看

直接上图说明问题

问题说明

一般网站页面都会有三角方块，或者他们组合的图形。有人说可以直接叫美工切个图，不就完事了吗。当然这是可以的，也是重要方法之一，但是知识会固定死，遇到极端苛刻的场景需求，估计GG了。当然这是自己说给自己听的，与大神无关。大神越过

知识点梳理

1.如何产生小方块：

使用块级元素或者行内块元素进行设置（强制转换元素类型当然也是可以的）
代码如下：

{
width:0;
height:0;
border:100px solid transparent;
border-left-top:red;
}

2.产生小方块的方式

1）.使用空的块级标签或行内块标签来设置，然后在定位到需要的位置。
2). 使用伪元素来创建一个空标签，然后在定位到需要的位置。

开始效果的代码展示

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8"/>
<style type="text/css">
*{
margin:0;
padding: 0;
}
span{
display: block;    /*注意行内元素没有效果,要转为块级元素或者行内块元素*/
width:0;
height: 0;
border-top:100px solid #abc;
border-right: 100px solid #acb;
border-bottom:100px solid #aaa;
border-left: 100px solid #ff0;
}
p{
width:0;
height: 0;
border:100px solid transparent;  /*transparent为透明色*/
border-top-color:red;   /*想要顶部的三角形*/
margin-top:20px; /*设置两个距离*/
}
h3{
width:0;
height: 0;
border:100px solid transparent;
border-right-color:#f0f;
border-bottom-color:#ff0;
}
a{
display: inline-block;
width:120px;
height: 50px;
line-height: 50px;
background-color: #FFA500;
text-align: center;
position: relative;
margin:100px; /*设置与上边的距离*/
}
/*a b{
position: absolute;
top:0;
left: 0;
display: block;
width: 0;
height: 0;
border:10px solid #fff;
border-right-color: green;
border-bottom-color:green;
}
a:hover{
background-color: pink;
color:#fff;
}
a:hover b{
border-right-color: blue;
border-bottom-color:blue;
}*/

/*第二种方法实现折叠效果，使用伪元素来实现*/
a:before{
content: "";
display: block;
position: absolute;
left: 0;
top:0;
width: 0;
height: 0;
border:10px solid #fff;
border-right-color: green;
border-bottom-color:green;
}
a:hover{
background-color: pink;
}

</style>
</head>
<body>
<span></span>
<p></p>
<h3></h3>
<a href="#">
<b></b>
网站导航
</a>
</body>
</html>

使用三角块来实现面包屑导航

效果图如下：

代码如下，实现原理（三角块加定位及伪元素）

<!DOCTYPE html>
<html>
<head>
<title>test 面包导航效果</title>
<meta charset="utf-8"/>
<style type="text/css">
*{
margin:0;
padding:0;
}
.nav{
display: inline-block;
height: 80px;
margin:20px auto;
font-size:0; /*处理行内块默认的边距，或者使用float来设置*/
}
.nav a{
display: inline-block;
color:#fff;
text-decoration: none;
font:bold 18px/80px "微软雅黑";
height: 80px;
background-color: #3498DB;
padding:0px 40px 0px 80px;
margin-right:10px;
position: relative;
}
.nav a:after{
content: '';
width:0;
height: 0;
border:40px solid transparent;
border-left-color:#3498DB;
position: absolute;
right:-80px;
top:0;
z-index: 10;
}
.nav a:before{
content: '';
width: 0;
height: 0;
border:40px solid transparent;
border-left-color:#fff;
position: absolute;
left: 0;
top:0;
z-index: 1;
}
/*设置去掉第一个a标签的左边的*/
.nav a:nth-child(1):before{
display: none;
}
.nav a:nth-last-child(1):after{
display: none;
}
/*设置第一个，最后一个a标签的圆角*/
.nav a:first-child{
border-radius:5px;
}
.nav a:last-child{
border-radius:5px;
}
</style>
</head>
<body>
<div class="nav">
<a href="#">Browse</a>
<a href="#">Compare</a>
<a href="#">order Confirmation</a>
<a href="#">Checkout</a>
</div>
</body>
</html>

送给一些努力奔跑的人

不多bb，做好自己，加油干!

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

标签： css实现三角形面包屑导航伪元素实现三角块绝对定位实现三角块图形

相关文章推荐

新的分享

章节导航