html三角形怎么做

html三角形怎么做,第1张

虽然有答案了 , 但也有必要让你知道下   这个可以用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>


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/zaji/8367633.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-04-15
下一篇 2023-04-15

发表评论

登录后才能评论

评论列表(0条)

保存