小技巧只用css实现带小三角的对话框样式
Posted hzhjxx
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了小技巧只用css实现带小三角的对话框样式相关的知识，希望对你有一定的参考价值。
一个小小的技巧：
如图所示，这种小三角，不用图片，只用css怎么实现呢？
直接上代码吧：
<!DOCTYPE html> <html> <head> <title>三角</title> <style> .main{width: 100px;border: 1px solid red;height: 100px;position: relative;} .box{width: 0;height: 0;border-style: solid;border-width: 10px;border-color: red transparent transparent transparent;position: relative;margin-left: 40px;z-index: 10;} .box .con{ width: 0;height: 0;border-style: solid;border-width: 15px;border-color: #fff transparent transparent transparent;position: absolute;left: -15px;top: -16px;} </style> </head> <div class="main"></div> <div class="box"> <div class="con"></div> </div> </body> </html>
其原理就是利用边框，三个边只有一个有颜色，其他透明，用两个层实现遮挡。
还有有点小用处的，在此记录一下，以后遇到了直接拷贝。
以上是关于小技巧只用css实现带小三角的对话框样式的主要内容，如果未能解决你的问题，请参考以下文章
精灵技术字体图标CSS三角用户界面样式溢出文字显示常见布局技巧