html css dotted border 边框虚线太密

三角形

/** 正三角 */.triangle {  width: 0;  height: 0;  border-style: solid;  border-width: 0 25px 40px 25px;  border-color: transparent transparent rgb(245, 129, 127) transparent;}

/** 倒三角 */.triangle {  width: 0;  height: 0;  border-style: solid;  border-width: 40px 25px 0 25px;  border-color:  rgb(245, 129, 127) transparent transparent transparent;}

 

虚线太密解决方法

.dotted-line{    border: 1px dashed transparent;    background: linear-gradient(white,white) padding-box, repeating-linear-gradient(-45deg,#ccc 0, #ccc .25em,white 0,white .75em);}

 

虚线太密解决方案2（只能一边）

/*Horizontal*/
background-image: linear-gradient(to right, black 33%, rgba(255,255,255,0) 0%);
background-position: bottom;
background-size: 3px 1px;
background-repeat: repeat-x;
 
/*Vertical*/
background-image: linear-gradient(black 33%, rgba(255,255,255,0) 0%);
background-position: right;
background-size: 1px 3px;
background-repeat: repeat-y;