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

亡梦爱人 提交于 2019-12-03 23:38:59

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

方法一:

<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>
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!