1实现带三角边框

效果

右

左

上

下

实现代码

<div class="cssTest-right"></div> <div class="cssTest-left"></div> <div class="cssTest-top"></div> <div class="cssTest-bottom"></div> .mainbox .panel { position: relative; height: 3.875rem; padding: 0 0.1875rem 0.5rem; border: 1px solid rgba(25, 186, 139, 0.17); background: url(../images/line.png) rgba(225, 225, 225, 0.03); margin-bottom: 0.1875rem; } .mainbox .panel::before { position: absolute; top: 0px; left: 0px; width: 10px; height: 10px; border-left: 2px solid #02a6b5; border-top: 2px solid #02a6b5; content: ""; } .mainbox .panel::after { position: absolute; top: 0px; right: 0px; width: 10px; height: 10px; border-right: 2px solid #02a6b5; border-top: 2px solid #02a6b5; content: ""; } .mainbox .panel .panel-footer { position: absolute; bottom: 0px; left: 0px; width: 100%; } .mainbox .panel .panel-footer::before { position: absolute; bottom: 0px; right: 0px; width: 10px; height: 10px; border-right: 2px solid #02a6b5; border-bottom: 2px solid #02a6b5; content: ""; } .mainbox .panel .panel-footer::after { position: absolute; bottom: 0px; left: 0px; width: 10px; height: 10px; border-left: 2px solid #02a6b5; border-bottom: 2px solid #02a6b5; content: ""; }

2?before和after伪类实现四角边框

TML+CSS

利用伪类制作边框

div class="colume"> <div class="panel bar"> <h2>柱形图</h2> <div class="chart"></div> <div class="panel-footer"></div> </div> </div>

.mainbox .panel { position: relative; height: 3.875rem; padding: 0 0.1875rem 0.5rem; border: 1px solid rgba(25, 186, 139, 0.17); background: url(../images/line.png) rgba(225, 225, 225, 0.03); margin-bottom: 0.1875rem; } .mainbox .panel::before { position: absolute; top: 0px; left: 0px; width: 10px; height: 10px; border-left: 2px solid #02a6b5; border-top: 2px solid #02a6b5; content: ""; } .mainbox .panel::after { position: absolute; top: 0px; right: 0px; width: 10px; height: 10px; border-right: 2px solid #02a6b5; border-top: 2px solid #02a6b5; content: ""; } .mainbox .panel .panel-footer { position: absolute; bottom: 0px; left: 0px; width: 100%; } .mainbox .panel .panel-footer::before { position: absolute; bottom: 0px; right: 0px; width: 10px; height: 10px; border-right: 2px solid #02a6b5; border-bottom: 2px solid #02a6b5; content: ""; } .mainbox .panel .panel-footer::after { position: absolute; bottom: 0px; left: 0px; width: 10px; height: 10px; border-left: 2px solid #02a6b5; border-bottom: 2px solid #02a6b5; content: ""; }

方法2

<div class="global_echarts_box"> <p class="global_biaoti2">监管系统标题1</p> </div> global_echarts_box { position: absolute; width: 23%; height: 70%; top: 20vh; right: 4vh; // csss实现四角边框 box-shadow: 0 0 20px #1f69b9b9 inset; background: linear-gradient(#33cdfa, #33cdfa) left top, linear-gradient(#33cdfa, #33cdfa) left top, linear-gradient(#33cdfa, #33cdfa) right top, linear-gradient(#33cdfa, #33cdfa) right top, linear-gradient(#33cdfa, #33cdfa) left bottom, linear-gradient(#33cdfa, #33cdfa) left bottom, linear-gradient(#33cdfa, #33cdfa) right bottom, linear-gradient(#33cdfa, #33cdfa) right bottom; background-repeat: no-repeat; background-size: 2px 12px, 12px 2px; }

---

1.本站遵循行业规范，任何转载的稿件都会明确标注作者和来源；2.本站的原创文章，会注明原创字样,如未注明都非原创，如有侵权请联系删除！；3.作者投稿可能会经我们编辑修改或补充；4.本站不提供任何储存功能只提供收集或者投稿人的网盘链接。