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

- 日理万妓 2021-07-24 12:19 364阅读 0赞

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

效果图:  
![在这里插入图片描述][20201123194113333.png_pic_center]  
代码示例:  
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;
    }

[20201123194113333.png_pic_center]: /images/20210724/254acb4e1860465db9436f741063792b.png