思路:两个三角形叠加,暂且把有边框的三角形定义为A,大三角形定义为B,小三角形定义为C,B的背景颜色==A的边框颜色,B的背景颜色=A的背景颜色。可以利用伪元素,也可以利用绝对定位的方式。
<div class="box"> <div class="triangle"></div> </div>
css样式:
*{ padding:0; margin:0; } html{ font-size: 62.5%; } .box{ height:10rem; width:15rem; border-radius:0.5rem; border:1px solid lightblue; margin:1.5rem auto; position:relative; } /*小的三角形,用的是给大box加伪元素*/ .triangle{ position:absolute; width:0; height:0; border-top:0.5rem solid transparent; border-right:0.5rem solid #fff; border-bottom: 0.5rem solid transparent; top:1.5rem; left:-0.5rem; } /*大的三角形,用的是绝对定位*/ .box:before{ content:""; position:absolute; width:0; height:0; border-top:0.6rem solid transparent; border-right:0.6rem solid lightblue; border-bottom: 0.6rem solid transparent; top:1.4rem; left:-0.6rem; }
效果图:
定位方式可以根据自己喜欢修改,可以都是绝对定位也可以都是使用伪元素