虽然有答案了 , 但也有必要让你知道下 这个可以用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可以实现啊例如
#test {
width: 0
height: 0
border-left: 50px solid transparent
border-right: 50px solid transparent
border-top: 100px solid red
}
就能得到一个向下的三角形了
<div style="width:200pxheight:174px-webkit-clip-path: polygon(50% 0, 0 100%, 100% 100%)clip-path: polygon(50% 0, 0 100%, 100% 100%)text-align:centerline-height:300pxcolor:#fffbackground-color:red">等边三角形</div><div style="width:200pxheight:100px-webkit-clip-path: polygon(50% 0, 0 100%, 100% 100%)clip-path: polygon(50% 0, 0 100%, 100% 100%)text-align:centerline-height:175pxcolor:#fffbackground-color:red">等腰直角三角形</div>
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)