第二种方法制作三角

来源：互联网发布：淘宝最好的外贸原单店编辑：程序博客网时间：2024/04/27 05:06

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title></title>    <style type="text/css">    div.arrow-up {    width:0px;    height:0px;    border-left:20px solid transparent;  /* left arrow slant */    border-right:20px solid transparent; /* right arrow slant */    border-bottom:20px solid #FF9600; /* bottom, add background color here */    font-size:0px;    line-height:0px;        margin-bottom: 10px;    }    /* create an arrow that points down */    div.arrow-down {    width:0px;    height:0px;    border-left:20px solid transparent;    border-right:20px solid transparent;    border-top:20px solid #FF9600;    font-size:0px;    line-height:0px;        margin-bottom: 10px;    }    /* create an arrow that points left */    div.arrow-left {    width:0px;    height:0px;    border-bottom:20px solid transparent;  /* left arrow slant */    border-top:20px solid transparent; /* right arrow slant */    border-right:20px solid #FF9600; /* bottom, add background color here */    border-left: 20px solid transparent;        font-size:0px;    line-height:0px;    }    /* create an arrow that points right */    div.arrow-right {    width:0px;    height:0px;    border-bottom:20px solid transparent;  /* left arrow slant */    border-top:20px solid transparent; /* right arrow slant */    border-left:20px solid #FF9600; /* bottom, add background color here */    font-size:0px;    line-height:0px;    }    </style></head><body><div class="arrow-up"></div><div class="arrow-down"></div><div class="arrow-left"></div><div class="arrow-right"></div></body></html>

这种方法是隐藏其他三边，显示剩下的一个border
这里写图片描述

0 0