<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> div{ margin-bottom: 30px; } .arrow_top { width: 0; height: 0; border-color: transparent; border-style: solid; border-bottom-color: red; border-width: 6px; position: relative; } .arrow_top:after { position: absolute; content: ''; display: block; top: -5px; margin-left: -6px; border-color: transparent; border-style: solid; border-bottom-color: white; border-width: 6px; } .arrow__bottom { width: 0; height: 0; border-color: transparent; border-style: solid; border-top-color: red; border-width: 6px; position: relative; } .arrow__bottom:after { position: absolute; content: ''; display: block; top: -7px; margin-left: -6px; border-color: transparent; border-style: solid; border-top-color: white; border-width: 6px; } .arrow__right { width: 0; height: 0; border-color: transparent; border-style: solid; border-right-color: red; border-width: 6px; position: relative; margin-left: -6px; } .arrow__right:after { position: absolute; content: ''; display: block; top: -6px; margin-left: -5px; border-color: transparent; border-style: solid; border-right-color: white; border-width: 6px; } .arrow__left { width: 0; height: 0; border-color: transparent; border-style: solid; border-left-color: red; border-width: 6px; position: relative; } .arrow__left:after { position: absolute; content: ''; display: block; top: -6px; margin-left: -7px; border-color: transparent; border-style: solid; border-left-color: white; border-width: 6px; } </style> </head> <body> <div> </div> <div> </div> <div> </div> <div> </div> </body> </html>
来源:https://zhuanlan.zhihu.com/p/144699306