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>

posted on 2019-11-07 13:38  咳咳1122  阅读(742)  评论(0编辑  收藏  举报

导航