當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

用纯Css作三角形

發布時間：2025/7/14 编程问答 35 豆豆

生活随笔收集整理的這篇文章主要介紹了用纯Css作三角形小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

<style>

//向上三角形

.triangle_up{

width:0;

height:0;

border-left:30px solid transparent;

border-right:30px solid transparent;

border-bottom:30px solid red;

}

//向下三角形

.triangle_up{

width:0;

height:0;

border-left:30px solid transparent;

border-right:30px solid transparent;

border-top:30px solid red;

}

//向左三角形

.triangle_up{

width:0;

height:0;

border-top:30px solid transparent;

border-bottom:30px solid transparent;

border-right:30px solid red;

}

//向右三角形

.triangle_up{

width:0;

height:0;

border-top:30px solid transparent;

border-bottom:30px solid transparent;

border-left:30px solid red;

}

</style>

<body>

</body>

綜上所述：你所要的三角形朝向是跟代碼所寫是對立的。比如：朝上的三角形，你就得用border-bottom；朝左，你就得用border-right;如此。。。

轉載于:https://www.cnblogs.com/fkcqwq/p/5445405.html

以上是生活随笔為你收集整理的用纯Css作三角形的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。