有时需要在页面显示三角形,需要通过画正方形才能得到三角形,代码如下:
方法一:
<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>