html+css显示出三角形方法transparent

时间：2019-11-07 15:05:30 阅读：104 评论：0 收藏：0 [点我收藏+]

有时需要在页面显示三角形，需要通过画正方形才能得到三角形，代码如下：

方法一：首先需要设置边框的大小与颜色，设置边框的上右下左分别你需要哪块显示在前端即后面跟数据，如果不需要显示的话就写transparent；

<style>

.tr1{

width: 0;

height: 0;

border: 100px solid transparent;

border-top-color: black;

border-bottom: none;

border-left-color: transparent;

border-right-color: transparent;

}

</style>

<body>

</body>

方法二：

<style>

　　.box{

　　　　width: 0px;

　　　　height: 0px;

　　　　/* background: blue; */

　　　　border-top: 20px solid rgba(0,0,0,0);

　　　　border-bottom: 20px solid black;

　　　　border-left:20px solid rgba(0,0,0,0);

　　　　border-right: 20px solid rgba(0,0,0,0);

　　　　}

</style>

<body>

</div>

</body>

原文：https://www.cnblogs.com/zmxyl-1437/p/11811529.html

踩

(0)

评论一句话评论（0）

分享档案

更多>