边框带有三角指向的矩形框

基本思路:
div设置高宽为0,此时四边边框全为三角形,然后设置上左右边框色透明(上边框宽度为0,因为定位是按照内容区域定位,若还有上边框,伪类的上边框会定位到自身的中间),设置该div背景色作为边框
然后设置div的伪类,设置相同,定位后需要向下移动1px以及向左移动边框长度,使得上方设置的背景色作为边框,让伪类的背景色和矩形框相同即可

效果图:

代码示例:
html:

   <div className='jf-list-tip-container'>
          <div className='jf-list-tip'>
              <div className='jf-list-tip-triangle'></div>
              <ul className='jf-list'>
                  {
                      tipList.map((item,index)=>{
                          return <li  key={item+index} onClick={()=>{this._onTipClick(index,item)}}>{item}</li>
                      })
                  }
              </ul>
          </div>
      </div>

css:

.jf-list-tip-container{
    position: absolute;
    width: var(--tipWidth,120px);
    height: 120px;
    top:120%;
    left: var(--tipLeft,0);
    display: flex;
    z-index: 99;
}

.jf-list-tip{
    position: relative;
    height: 100%;
    width: 100%;
    display: flex;
    /* box-sizing: border-box; */
}

.jf-list-tip-triangle{
    position: absolute;
    width: 0;
    height: 0;
    left: var(--tipTriangleLeft,var(--prefixGap,5%));
    box-sizing: border-box;
    border-top-width: 0px;
    border-right-width:var(--tipTriangleWidth,6px);
    border-bottom-width: var(--tipTriangleWidth,6px);
    border-left-width:var(--tipTriangleWidth,6px);

    border-top-color: transparent;
    border-right-color: transparent;
    border-bottom-color:var(--tipBorderColor,#ccc);
    border-left-color: transparent;

    border-style: solid;

}

.jf-list-tip-triangle::after{
    content: " ";
    box-sizing: border-box;
    position: absolute;
    top: 1px;
    left: 0;
    margin-left:calc(0px - var(--tipTriangleWidth,6px));
    border-width: var(--tipTriangleWidth,6px);
    border-right-width: var(--tipTriangleWidth,6px);
    border-bottom-width: var(--tipTriangleWidth,6px);
    border-left-width:var(--tipTriangleWidth,6px);
    border-top-width: 0;
    border-bottom-color: #fff;

    width: 0;
    height: 0;
    border-top-color: transparent;
    border-right-color: transparent;
    border-left-color: transparent;
    border-style: solid;
    
}

.jf-list{
    width: 100%;
    padding-left: 0%;
    box-sizing: border-box;
    margin-top:var(--tipTriangleWidth,6px);;
    background-color: white;
    border:solid 1px var(--tipBorderColor,#ccc);;
    border-radius:var(--tipBorderRadius,5px);
    list-style: none;
    overflow-y:scroll;
}