用css实现框内实线

只给一个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;
}

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 11,580评论 1 91
  • 本课来自http://www.imooc.com/learn/9请不要用作商业用途。 HTML5 HTML介绍 H...
    PYLON阅读 1,865评论 0 5
  • 1.CSS基本概念 1.1 CSS的定义 CSS(Cascading Style Sheets)层叠样式表,主要用...
    寥寥十一阅读 993评论 0 6
  • 使用nutz+javax.mail来进行简单的邮件发送操作,没有包含附件的操作,测试的邮箱是公司的邮箱,建议使用网...
    白虎先生阅读 505评论 0 1
  • 老郭问我我是不是不喜欢一个好朋友的女票。我这还真没想过,仔细想想吧,不是会喜欢的那类人,但也不至于不喜欢。但感觉这...
    由心出发阅读 82评论 0 0