1.清除浮动
给父元素添加
<div class="top"> <div class="left">欢迎来到!</div> <div class="right">登录|注册</div> </div> .top .left{ float: left; } .top .right{ float: right; } .top:after{ // content:""; height:0px; 0px; clear:both; display:block; overflow: hidden;或者visibility:hidden }
2.画三角形
常规实现:
.tri-up{ 0;height:0;border-left:20px solid transparent;border-right: 20px solid transparent;border-bottom: 20px solid red; } .tri-left{ 0;height:0;border-top:20px solid transparent;border-bottom: 20px solid transparent;border-left: 20px solid red;} .tri-right{ 0;height:0;border-top:20px solid transparent;border-bottom: 20px solid transparent;border-right: 20px solid red;} .tri-down{ 0;height:0;border-left:20px solid transparent;border-right: 20px solid transparent;border-top: 20px solid red; }
伪元素实现
/* 下箭头 */
.jiantou:after{
display:block;
content:'';
border-top:8px solid #ff4d4d;
border-left:8px solid transparent ;
border-right:8px solid transparent ;
border-bottom:8px solid transparent ;
/* 定位 */
position:absolute;
left:40%;
top:100%;
}
或者下面写法
/* 下箭头 */
.jiantou:after{
display:block;
content:'';
border-8px 8px 8px 8px;
border-style:solid;
border-color:#ff4d4d transparent transparent transparent;
/* 定位 */
position:absolute;
left:40%;
top:100%;
}