七星彩网站开发公司,wordpress皮肤下载,网页制作工程师,wordpress关闭手机版CSS border原理 一个div或者元素的border并不是我们直观意义上的一条有高度的线#xff0c;而是一个等高梯形或者三角形#xff08;宽高为0时#xff09;#xff0c;可以看一下效果#xff1a; HTML: div classarrow1/div CSS: .arrow1{ font…CSS border原理 一个div或者元素的border并不是我们直观意义上的一条有高度的线而是一个等高梯形或者三角形宽高为0时可以看一下效果 HTML: div classarrow1/div CSS: .arrow1{ font-size:0; /*默认有高度会撑开,这里清楚高度*/ width:0; height:0; border-width:30px; border-style:solid; border-color:red blue green orange; } 可以看到每一个方向的border都是一个三角形那么我们只需把对应方向剩余其他方向的border设置为透明或者隐藏掉就可以得到任何方向的一个三角形了。 我们以一个下拉图标为示例得到这样一个图标可以将border的左右和下边框改为透明css改动如下 .arrow1{ font-size:0; /*默认有高度会撑开,这里清楚高度*/ width:0; height:0; border-width:30px 30px 0; border-style:solid dashed dashed; /*左右下设为dashed为了兼容ie6*/ border-color:red transparent transparent; } 如果我们想实现下图的效果该怎么办呢很简单做两个小三角一个是背景色一个是边框色Java然后利用定位重叠在一起记住他们的定位要相差一个像素哦~ HTML: div classmessage-box span你好啊,欢迎加入我们!/span div classtriangle-border tb-border/div div classtriangle-border tb-background/div /div CSS: .message-box { position:relative; width:240px; height:60px; line-height:60px; background:#E9FBE4; box-shadow:1px 2px 3px #E9FBE4; border:1px solid #C9E9C0; border-radius:4px; text-align:center; color:#0C7823; } .triangle-border { position:absolute; left:30px; overflow:hidden; width:0; height:0; border-width:10px; border-style:solid dashed dashed; } .tb-border { bottom:-20px; border-color:#C9E9C0 transparent transparent; } .tb-background { bottom:-19px; border-color:#E9FBE4 transparent transparent; } 转载于:https://www.cnblogs.com/manshanyoucaihua/p/4456072.html
