CSS实现边框布局（百度前端笔试）

来源：互联网发布：vscode golang 配置编辑：程序博客网时间：2024/06/08 13:49

主要思想为：先实现大的正方形边框，在边框前实现黑底三角形，再覆盖一个白底三角形。

主要用border-left-color实现三角形，left则三角形顶点向右，right则三角形顶点向左。

<!DOCTYPE html><html><head><title>css布局（凸三角正方形）</title><meta charset="UTF-8"><style type="text/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;}</style></head><body><div id="demo"></div></body></html>

0 0