如何在div标签上添加带边框的三角形

使用位于带有指针和阴影的初始框，您可以对其进行重新样式设置以形成所需的形状：

.arrow_box {  top: 40px;  position: relative;  background: #ffffff;  border: 1px solid #719ECE;    width: 200px;  height: 200px;  border-radius: 3px;  -webkit-filter: drop-shadow(0 1px 10px rgba(113, 158, 206, 0.8));   -moz-box-shadow: 0 1px 10px rgba(113, 158, 206, 0.8);  filter: drop-shadow(0 1px 10px rgba(113, 158, 206, 0.8));}.arrow_box:after,.arrow_box:before {  bottom: 100%;  border: solid transparent;  content: " ";  height: 0;  width: 0;  position: absolute;  pointer-events: none;}.arrow_box:after {  border-color: rgba(255, 255, 255, 0);  border-bottom-color: #ffffff;  border-width: 19px;  left: 50%;  margin-left: -19px;}.arrow_box:before {  border-color: rgba(113, 158, 206, 0);  border-bottom-color: #719ECE;  border-width: 20px;  left: 50%;  margin-left: -20px;}<div ></div>

如果您需要将箭头进一步向右移动，则只需使用

left

.arrow_box:after

.arrow_box:before