虽然有答案了 ， 但也有必要让你知道下 这个可以用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
}
下面是个示例：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<style>
body,html{
width:100%
height:100%
margin:0
text-align:center
background: #FFF
}
.triangle_shap{
width:0
height:0
border-top:200px solid #ff630e
border-left:200px solid transparent
border-right:200px solid transparent
border-bottom: none
position: absolute
top:50%
left:50%
margin-left: -200px
margin-top: -141.42135623730950488016887242097px
}
.triangle_core{
width:0
height:0
border-top:150px solid #FFF
border-left:150px solid transparent
border-right:150px solid transparent
border-bottom: none
position: absolute
top:0
left:0
margin-left: -150px
margin-top: -180px
}
span{
position: absolute
top:0
left:0
margin-top: -150px
margin-left: -10px
color: #ff630e
font-weight: bold
font-family: "微软雅黑"
}
</style>
<body>
<div class="triangle_shap">
<div class="triangle_core">
<span>了定当我I主吧</span>
</div>
</div>
</body>
</html>
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）