<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
body { padding: 100px; }
/*****/
.arrow_box { position: relative; border: 1px solid #E96A4A; margin: auto; 90%; border-radius: 6px; text-align: center; height:100px; }
.arrow_box:after, .arrow_box:before { bottom: 100%; border: solid transparent; content: " "; height: 0; 0; position: absolute; pointer-events: none; }
.arrow_box:after { border-color: rgba(136, 183, 213, 0); border-bottom-color: #ffffff; border- 30px; margin-left: -30px; }
.arrow_box:before { border-color: rgba(194, 225, 245, 0); border-bottom-color: #E96A4A; border- 32px; margin-left: -32px; }
/*************/
.arrow_box:after,.arrow_box:before { left: 13.5%; }
</style>
</head>
<body>
<div class="arrow_box">
</div>
</body>
</html>