怎样用html或css制作三角形

怎样用html或css制作三角形,第1张

只设置border三个方向的值,另一个方向就会汇聚成一个点,就出现三角形了,希望对你有帮助,望采纳!

#triangle-left {

    width: 0

    height: 0

    border-top: 50px solid transparent

    border-right: 100px solid red

    border-bottom: 50px solid transparent

}

下面是个示例:

padding表示内边距,设置格式可以有如下方式:

1、padding: 10px 10px  第一个10px表示上下内边距。第二个10px表示左右内边距。

2、padding:10px 20px 30px 40px对应的分别是上右下左,上边距是10px,右边距是20px,下边距是30px,左边距是40px。

<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/7311993.html

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

发表评论

登录后才能评论

评论列表(0条)

保存