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

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

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

<style>
            .tr1{
                 0;
                height: 0;
                border: 100px solid transparent;
                border-top-color: black;
                border-bottom: none;
                border-left-color: transparent;
                border-right-color: transparent;
            }
</style>
<body>
  <div class="tr1"></div>
</body>
 
 
 
方法二:
<style>
  .box{
     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 class="box">
</div>
</body>
原文地址:https://www.cnblogs.com/zmxyl-1437/p/11811529.html