首页 > 代码库 > 带背景颜色的小三角实现
带背景颜色的小三角实现
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>带背景颜色的小三角实现</title>
<style>
#top {
position: absolute;
width: 0px;
height: 0px;
line-height: 0px;/*为了防止ie下出现题型*/
border-bottom: 10px solid #89b007;
border-left: 10px solid #fff;
border-right: 10px solid #fff;
left: 76px;
top: -10px;
}
#right {
position: absolute;
width: 0px;
height: 0px;
line-height: 0px;
border-left: 10px solid #89b007;
border-bottom: 10px solid #fff;
border-top: 10px solid #fff;
left: 300px;
top: 40px;
}
#left {
position: absolute;
width: 0px;
height: 0px;
line-height: 0px;
border-right: 10px solid #89b007;
border-bottom: 10px solid #fff;
border-top: 10px solid #fff;
left: -10px;
top: 40px;
}
#bottom {
position: absolute;
width: 0px;
height: 0px;
line-height: 0px;
border-top: 10px solid #89b007;
border-left: 10px solid #fff;
border-right: 10px solid #fff;
left: 104px;
top:150px;
}
#first {
border-radius:8px;
-moz-border-radius:8px;-ms-border-radius:8px;-o-border-radius:8px;-webkit-border-radius:8px;
position: absolute;
height: 150px;
width: 300px;
background: #89b007;
left: 22px;
top: 33px;
}
#first p{ padding:10px; line-height:1.5; color:#FFF;}
#first1 {
border-radius:8px;
-moz-border-radius:8px;-ms-border-radius:8px;-o-border-radius:8px;-webkit-border-radius:8px;
position: absolute;
height: 150px;
width: 300px;
background: #89b007;
left: 22px;
top: 33px;
margin-top:160px
}
#first1 p{ padding:10px; line-height:1.5; color:#FFF;}
#first2 {
border-radius:8px;
-moz-border-radius:8px;-ms-border-radius:8px;-o-border-radius:8px;-webkit-border-radius:8px;
position: absolute;
height: 150px;
width: 300px;
background: #89b007;
left: 22px;
top: 33px;
margin-top:320px
}
#first2 p{ padding:10px; line-height:1.5; color:#FFF; }
#first3 {
border-radius:8px;
-moz-border-radius:8px;-ms-border-radius:8px;-o-border-radius:8px;-webkit-border-radius:8px;
position: absolute;
height: 150px;
width: 300px;
background: #89b007;
left: 22px;
top: 33px;
margin-top:480px;
margin-bottom:40px;
}
#first3 p{ padding:10px; line-height:1.5; color:#FFF; }
</style>
</head>
<body>
<div id="first">
<p>带背景颜色的小三角实现是比较简单的！</p>
<span id="top"></span>
</div>
<div id="first1">
<p>带背景颜色的小三角实现是比较简单的！</p>
<span id="right"></span>
</div>
<div id="first2">
<p>带背景颜色的小三角实现是比较简单的！</p>
<span id="left"></span>
</div>
<div id="first3">
<p>带背景颜色的小三角实现是比较简单的！</p>
<span id="bottom"></span>
</div>
</body>
</html>
效果图
带背景颜色的小三角实现