用css做三角形 

<html>
<body>
<style>
.trlangle{
   width: 0;
   height: 0;
   border-left: 50px solid transparent;
   border-right: 50px solid transparent;
   border-bottom: 100px solid red;
}
</style>


<div class="trlangle"></div>
</body>
</html>

 2.

<html>
<body>
<style>
.triangle_border_up{
    width:0;
    height:0;
    border-width:0 30px 30px;
    border-style:solid;
    border-color:transparent transparent #333;/*透明 透明  灰*/
    margin:40px auto;
    position:relative;
}
.triangle_border_up span{
    display:block;
    width:0;
    height:0;
    border-width:0 28px 28px;
    border-style:solid;
    border-color:transparent transparent #fc0;/*透明 透明  黄*/
    position:absolute;
    top:0px;
    left:0px;
}
</style>


<div class="triangle_border_up">
    <span></span>
</div>
</body>
</html>

 

posted @ 2019-09-27 15:21  林中有风  阅读(194)  评论(0)  编辑  收藏  举报