红糖糍粑
你好，我这里用CSS实现了三种带边框三角，效果分别如图：实例代码如下，根据你个人的情况调整代码吧：1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Arrow</title></head><body><style>/* scale */.arrow,.arrow:after{ position: relative; display: inline-block; width: 0; height: 0; border-top: 0; border-left: 30px dotted transparent; border-right: 30px dotted transparent; border-bottom: 30px dashed #000;}.arrow:after { position: absolute; top: 0; content: ''; transform: translateX(-50%) scale(.8); border-bottom: 30px dashed #fff;} /* width & height */.arrow1,.arrow1:after { position: relative; display: inline-block; width: 0; height: 0; border-top: 0; border-left: 30px dotted transparent; border-right: 30px dotted transparent; border-bottom: 30px dashed #000;}.arrow1:after { position: absolute; left: -26px; top: 2px; content: ''; width: 0; height: 0; border-top: 0; border-left: 26px dotted transparent; border-right: 26px dotted transparent; border-bottom: 26px dashed #fff;} /* border & after */.arrow2 { position: relative; display: inline-block; width: 28px; height: 28px; border: 0; border-top: 2px solid #000; border-right: 2px solid #000; -webkit-transform: translate(7px, 14px) rotate(-45deg); -ms-transform: translate(7px, 14px) rotate(-45deg); -o-transform: translate(7px, 14px) rotate(-45deg); transform: translate(7px, 14px) rotate(-45deg);}.arrow2:after { position: absolute; left: 0; top: -2px; width: 42px; height: 2px; content: ''; border-radius: 2px; background-color: #000; -webkit-transform-origin: left top; -moz-transform-origin: left top; -ms-transform-origin: left top; -o-transform-origin: left top; transform-origin: left top; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg);}</style><span class="arrow"></span><span class="arrow1"></span><span class="arrow2"></span></body></html>