因為妳想要壹個空心邊框，所以需要兩個偽元素壹前壹後實現壹個白三角形和壹個紅三角形，白三角形可以占據紅三角形的位置。
下面是代碼和效果圖。
& lt！DOCTYPE html & gt
& lthtml & gt
& lthead & gt
& ltstyle & gt
。方框{
寬度:150 px；
身高:100 px；
位置:相對；？
邊框-半徑:10px；
邊框:1px紅色實心；？
}
。框:之前{
內容:“”；
位置:絕對；
top:100%；
左:50px
寬度:0；
高度:0；
border-left: 15px純色透明；
border-top: 15px純紅；
border-right: 15px純色透明；
}
。框:在{
內容:“”；
位置:絕對；
top:100%；
左:51px；
寬度:0；
高度:0；
border-left: 14px純色透明；
border-top:14px solid # fff；
border-right: 14px純色透明；
}
& lt/style & gt；
& lt/head & gt；
& ltbody & gt
& lt！-html-& gt；
& ltdiv？class="box " >
& lt/div & gt；？
& lt/body & gt；
& lt/html & gt；