设置对话框的小三角方法

Posted 2020-08-05 小猪冒泡

①：当小三角颜色边框与内部颜色一致时，可以使用三角形的画法（纯CSS绘制三角形（各种角度））或者使用搜狗输入法中的◆符号设置：

 

②：当小三角只需要设置颜色边框，且不需要设置内部颜色时，可以使用搜狗输入法中的◇符号设置：

③：当小三角既需要设置表框颜色又需要设置内部颜色的时候，需要设置两个◆来设置：

 

html代码为：

<div class="mess-box">
   <b>◆</b><span>◆</span></div> 
</div>

相应的css代码：

.mess-box{
    width: 200px;
    height: 50px;
    overflow: hidden;/*设置宽高和溢出是为了截取三角形*/
    position: relative;
    border:1px solid grey;/*这里是为了方便看出来，实际中没有该边框*/
    b{
        position: absolute;
        top:-30px;
        left: 0px;
        color:red;/*边框的效果*/
        font-size:50px;/*◆实际上属于输入的文字，所以用font-size来设置其大小*/

    }
    span{
        position: absolute;
        top:-31px;/*与上面的◆高度上相差1px，挡住了外面的四方框，达到内部颜色和边框颜色的效果*/
        left: 0.4px;/*按理说这里应该是相等的left，但是微调使得效果表现的更好*/
        color:#999;
        font-size:50px;

    }

}