虽然有答案了 , 但也有必要让你知道下 这个可以用css写出来,而且 很简单 很方便
有CSS3属性
包括 IE9 以上 支持 需要 -ms- 和-webkit- 具体 看兼容文档吧
.div{width: 0px
height: 0px
border-style: solid
border-color: transparent transparent transparent red
border-width: 20px
transform:rotate(45deg)
}
只设置border三个方向的值,另一个方向就会汇聚成一个点,就出现三角形了,希望对你有帮助,望采纳!
#triangle-left {
width: 0
height: 0
border-top: 50px solid transparent
border-right: 100px solid red
border-bottom: 50px solid transparent
}
下面是个示例:
css3写三角形(为了好区分姑且按方向区别):
(1)上三角形:
border: 16px solid transparent
border-bottom: 16px solid #f00
width: 0
height: 0
(2)下三角形:
border: 16px solid transparent
border-top: 16px solid #f00
width: 0
height: 0
(3)右三角形:
border: 16px solid transparent
border-left: 16px solid #f00
width: 0
height: 0
(4)左三角形:
border: 16px solid transparent
border-right: 16px solid #f00
width: 0
height: 0
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)