CSS带小三角形的div框

效果图:

<span class="hint_prompt">超时20天</span>

.hint_prompt { border: 1px solid #fff1f0; border-radius: 4px; margin: 50px; text-align: center; border: 1px solid #fff1f0; position: relative; padding: 3px 5px; background: #fff1f0; font-family: PingFangSC-Regular; font-weight: 400; font-size: 14px; color: #fd4b40; } .hint_prompt::before { content: ""; position: absolute; left: -56px; top: -43px; width: 10px; height: 10px; margin: 50px; transform: rotate(-45deg); background: #fff1f0; z-index: 0; border-top: 2px solid #fff1f0; border-left: 2px solid #fff1f0; }

 

posted @ 2022-09-22 11:13  挽你手  阅读(38)  评论(0编辑  收藏  举报