css制作三角形 实心的和空心的(笔试常考,特此分享)!!!!
制作实心的三角形
<diva id="demo"></div>
#demo{ width: 100px; height: 100px; background-color: #333; position: relative; } #demo:after{ border:solid transparent; border-left-color:#333; border-width:10px; width:0; content:" "; position:absolute; left:100%; top:10%; }
制作空心的三角型
<diva id="demo"></div>
#demo{ width: 100px; height: 100px; background-color:#fff; position:relative; border: 2px solid #000; /*整体颜色边框是黑色*/ } /*小三角*/ #demo:after{ border:solid transparent; border-left-color:#fff; border-width:10px; content:" "; position:absolute; left:100%; top:20px; /*20px*/ } /*大三角*/ #demo:before{ border:solid transparent; border-left-color:#000; border-width:12px; /*10px+2px*/ content:" "; position:absolute; left:100%; top:18px; /*20px-2px*/ }
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步