核心提示：代码写小图形时尽量避免引用图片增大项目体积。在做项目过程中，为了将设计原型还原，有一些小的图形需要我们用代码写上去，尽量避免引用图片增大项目体积。!DOCTYPE htmlhtmlheadmeta c...
代码写小图形时尽量避免引用图片增大项目体积。在做项目过程中，为了将设计原型还原，有一些小的图形需要我们用代码写上去，尽量避免引用图片增大项目体积。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{margin: 0;padding: 0;}
.box{width: 100px;height: 10px;border: 1px solid #000000;margin: 30px auto;position: relative;}
.box1{
position: absolute;
top: 62px;
width: 370px;
padding: 15px;
border: 1px solid #ddd;
background-color: #FFFFFF;
box-shadow: 0 4px 4px rgba(0,0,0,.15);
border-radius: 4px;
display: block;
height: 50px;
right: 0;
z-index: 10000 !important;
}
.box1:after,.box1:before{
bottom: 100%;
left: 95%;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
border-style: solid;
border-color: transparent;
}
.box1:before{
border-bottom-color: #ddd;
border-width: 9px;
margin-left: -9px;
}
.box1:after{
border-bottom-color: #FFFFFF;
border-width: 8px;
margin-left: -8px;
}
</style>
</head>
<body>
<p class="box">
<p class="box1">
</p>
</p>
</body>
</html>
