框框下面的小箭头的实现

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
    <meta name="viewport" content="width=1100" />
    <title>test</title>


    <style>
.bubble {
width:200px;
    margin: 50px;
    padding: 50px;
    position: relative;
}
.bubble:after {
    content: "";
    position: absolute;
   top: 100%;
   left: 20px;
   border-top: 20px solid blue;
   border-top-color: inherit; 
   border-left: 20px solid transparent;
   border-right: 20px solid transparent; 
}
    </style>

</head>

<body>
<div class="bubble" style="background: red; border-color: red;">test</div>

<div class="bubble" style="background: green; border-color: green;">test</div>

</body>
</html>

效果图如下：

不兼容ie

posted @ 2013-08-27 17:00 RightDear 阅读(178) 评论(0) 编辑收藏举报