纯 CSS 实现三角形尖角箭头的实例_css写<的箭头样式,并且箭头角度大一点-CSDN博客

本文介绍了一种利用CSS边框属性制作不同方向箭头的方法，通过调整border-width和border-color，可以轻松创建向上、向下、向左及向右的箭头形状。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

[html]view plaincopy 
    
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
 <html xmlns="http://www.w3.org/1999/xhtml">  
 <head>  
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
 <title>无标题文档</title>  
 <style type="text/css">  
 .area {  
     margin:100px auto;  
     width:300px;   
     height: 150px;   
 }  
 .item {  
     float:left; clear:both;  
     margin-bottom:23px;  
 }  
 /* 向上的箭头 */  
 .dot-top {  
     font-size: 0;  
     line-height: 0;  
     border-width: 10px;  
     border-color: red;  
     border-top-width: 0;  
     border-style: dashed;  
     border-bottom-style: solid;  
     border-left-color: transparent;  
     border-right-color: transparent;  
 }  
 /* 向右的箭头 */  
 .dot-right {  
     font-size: 0;  
     line-height: 0;  
     border-width: 10px;  
     border-color: red;  
     border-right-width: 0;  
     border-style: dashed;  
     border-left-style: solid;  
     border-top-color: transparent;  
     border-bottom-color: transparent;  
 }  
 /* 向下的箭头 */  
 .dot-bottom {  
     font-size: 0;  
     line-height: 0;  
     border-width: 10px;  
     border-color: red;  
     border-bottom-width: 0;  
     border-style: dashed;  
     border-top-style: solid;  
     border-left-color: transparent;  
     border-right-color: transparent;  
 }  
 /* 向左的箭头 */  
 .dot-left {  
     font-size: 0;  
     line-height: 0;  
     border-width: 10px;  
     border-color: red;  
     border-left-width: 0;  
     border-style: dashed;  
     border-right-style: solid;  
     border-top-color: transparent;  
     border-bottom-color: transparent;  
 }  
 </style>  
 </head>  
                                  
 <body>  
 <div class="area">  
     <span class="item dot-top"></span>  
     <span class="item dot-right"></span>  
     <span class="item dot-bottom"></span>  
     <span class="item dot-left"></span>  
 </div>  
 </body>  
 </html>  

可以通过设置 border-width 来调整箭头的大小，这样就不需要每次都去做图了，非常方便，颜色可以随时调整，真佩服那位老兄，以前虽然也发现 border 的两边是斜的但没想到可以这样来做尖角箭头，太厉害了

显示结果图：

可以加

position: absolute;
top: 50%;
margin-top: -10px;这个是border的width
margin-left: -5px;这个是border的一半widthleft: 50%;

最后可以写成--左箭头（朝哪的箭头就width为0，对边有颜色，邻边为transparent）

border-width:16px 16px 16px 0px;
border-color:transparent #fff;
border-style: solid;
position: absolute;
top: 50%;
margin-top: -16px;
margin-left: -8px;
left: 50%;