只设置border三个方向的值,另一个方向就会汇聚成一个点,就出现三角形了,希望对你有帮助,望采纳!
#triangle-left {
width: 0
height: 0
border-top: 50px solid transparent
border-right: 100px solid red
border-bottom: 50px solid transparent
}
下面是个示例:
<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>
<style>.test:after {display:inline-block content:"^" transform:rotate(180deg) scale(1.4,0.8)}
</style>
<span class="test">服务</span>
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)