脚本宝典收集整理的这篇文章主要介绍了详解CSS中左上朝向三角形(Top-Left Triangle)的几种制作方式,脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
今天我们介绍几种,用css实现左上朝向三角形(Top-Left Triangle)的写法。
这种三角形,一般可以用来做“对话框”类型图形的左下小脚。
第一种:
#triangle-topleft { border: 30px solid #e6686e; height: 0; width: 0; border-right-color: transparent; border-bottom-color: transparent; }
第二种:
#triangle-topleft { width: 0; height: 0; border-top: 60px solid #e6686e; border-right: 60px solid transparent; }
第三种:
#triangle-topleft { border: 60px solid transparent; width: 0; height: 0; border-left-color: #e6686e; border-top-width: 0; }
大家可以尝试更多种的三角形做法,以及不同朝向的三角形。
这里强烈推荐一个常用css图形的展示网站:https://css-tricks.com/the-shapes-of-css/
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本宝典。
以上是脚本宝典为你收集整理的详解CSS中左上朝向三角形(Top-Left Triangle)的几种制作方式全部内容,希望文章能够帮你解决详解CSS中左上朝向三角形(Top-Left Triangle)的几种制作方式所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。