zmxyl-1437

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

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

方法一:首先需要设置边框的大小与颜色,设置边框的上右下左分别你需要哪块显示在前端即后面跟数据,如果不需要显示的话就写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>
  <div class="tr1"></div>
</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 class="box">
</div>
</body>

分类:

技术点:

相关文章:

  • 2021-12-06
  • 2021-11-20
  • 2021-11-20
  • 2022-02-14
  • 2021-05-20
  • 2021-04-30
  • 2022-01-13
  • 2022-12-23
猜你喜欢
  • 2022-01-27
  • 2022-02-22
  • 2021-11-18
  • 2021-12-18
  • 2021-10-28
  • 2021-12-20
  • 2021-11-20
相关资源
相似解决方案