只给一个div标签,用css实现下图所示的框内实线,
我使用的方法是"伪元素+三角形",具体原理:在实线框内包含一个小一号的、带颜色的三角形,再在实三角形里包含一个更小一号的、白色的三角形,层层覆盖。
代码如下:
div {
box-sizing: border-box; /*box大小 = content + padding + border*/
position: relative;
left: 100px;
top: 100px;
height: 100px;
width: 100px;
border: 1px solid black;
}
div::before {
content: "";
position: absolute;
left: 0px;
bottom: 0px;
width: 0px;
height: 0px;
border-top: 49px solid transparent;/*边框长度 = 2倍border*/
border-right: 49px solid transparent;
border-bottom: 49px solid red;
border-left: 49px solid red;
}
div::after {
content: "";
position: absolute;
left: 0px;
bottom: 0px;
width: 0px;
height: 0px;
border-top: 48px solid transparent;
border-right: 48px solid transparent;
border-bottom: 48px solid white;
border-left: 48px solid white;
}