框框下面的小箭头的实现

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

相关阅读:
k8s中job和cronjob相关的yaml文件
k8s中controller-manager相关的yaml文件
常用的Linux命令
单一职责
func和Expression
策略模式和简单工厂
练习7第三题
练习7第二题
练习7第一题
实验6 数组1-1

原文地址：https://www.cnblogs.com/RightDear/p/3285345.html