文章图片
主要思想为：先实现大的正方形边框，在边框前实现黑底三角形，再覆盖一个白底三角形。
【学习笔记|CSS实现边框布局（百度前端笔试）】主要用border-left-color实现三角形，left则三角形顶点向右，right则三角形顶点向左。
css布局（凸三角正方形） - 锐客网
#demo{
position:relative;
width:100px;
height:100px;
border:2px solid #000;
background-color:#fff;
}
/*对于before和after前的冒号。CSS2为单冒号，CSS3为双冒号，但IE9及以上才支持*/
#demo::before, #demo::after{ /*冒号要紧跟#demo后面*/
content:"";
/*content属性是必须的而且应该经常被应用。否则，伪元素无论如何都无法正常工作。单引号和双引号都可以*/
position:absolute;
left:100%;
width:0px;
height:0px;
border:solid transparent;
}
#demo::before{
top:18px;
border-width:12px;
border-left-color:#000;
}
#demo::after{
top:20px;
border-width:10px;
border-left-color:#fff;
}
推荐阅读
- web网页模板|如此优秀的JS轮播图，写完老师都沉默了
- 接口|axios接口报错-参数类型错误解决
- JavaScript|vue 基于axios封装request接口请求——request.js文件
- JavaScript|JavaScript — 初识数组、数组字面量和方法、forEach、数组的遍历
- JavaScript|JavaScript — call()和apply()、Date对象、Math、包装类、字符串的方法
- JavaScript|JavaScript之DOM增删改查(重点)
- 前端|web前端dya07--ES6高级语法的转化&render&vue与webpack&export
- 网络|一文彻底搞懂前端监控
- vue|Vue面试常用详细总结
- javascript|vue使用js-xlsx导出excel，可修改格子样式，例如背景颜色、字体大小、列宽等