使用:before和:after伪元素创建两个三角形。
两个三角形的颜色应分别与容器border-color和容器的background-color颜色相同。
一个三角形(:before)的border-width()应该另一个(:after)宽1px，以便充当边界。
较小的三角形(:after)应位于较大三角形(:before)的右侧1px，以便显示其左边框。
预览效果如下所示：
HTML
divclass="container"Borderwithtoptriangle/div
CSS
.container{position:relative;background:#ffffff;padding:15px;border:1pxsolid#dddddd;margin-top:20px;}.container:before,.container:after{content:;position:absolute;bottom:%;left:19px;border:11pxsolidtransparent;border-bottom-color:#dddddd;}.container:after{left:20px;border:10pxsolidtransparent;border-bottom-color:#ffffff;}
今天就讲到这里，如果有问题需要咨询，大家可以直接留言或扫下方