框框下面的小箭头的实现

<!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

你可能感兴趣的:(实现)