带边框的三角形

我们先说一下这个带边框的三角形实现的思路：

①设置一个大三角形 A；

②再在里面设置一个小三角形 B；

③调整两个三角形的位置，使两者重叠，并且小三角形B位于大三角形A的中心，从而实现带边框的三角形；

一、绘制一个大三角形 A（边框）

三角形依靠矩形边框线（border）是梯形的特性来做的

①先给一个矩形设置比较宽的边框；

②把矩形宽高设为0；

③最后保留我们需要的那个三角形，并将边框颜色设置成看不见的颜色。

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>带边框的三角形</title>
    <style>
        /*大三角形（边框）*/
        .one {
            width: 0;
            height: 0;
            display: block;
            border-width: 40px; /* 上：0  左右40  下40 */
            border-style: solid;
            border-color: transparent transparent #fff 		transparent; /*透明 透明  边框色  透明*/
            margin: 40px auto;
            position: relative;
        }
    </style>
</head>
<body>
<div class="bg">
    <!-- 向上的三角形 -->
    <div class="one"></div>
</div>
</body>
</html>

二、再在里面设置一个小三角形 B

绘制三角形详情同上，直接上代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>带边框的三角形</title>
    <style>
        /*大三角形（边框）*/
        .one {
            width: 0;
            height: 0;
            display: block;
            border-width: 40px; /* 上：0  左右40  下40 */
            border-style: solid;
            border-color: transparent transparent #fff transparent; /*透明 透明  边框色  透明*/
            margin: 40px auto;
        }

        /*里面的小三角形*/
        .one span {
            width: 0;
            height: 0;
            display: block;
            border-width: 30px; /* 上：0  左右30  下30 */
            border-color: transparent transparent #A7A7DB transparent; /*透明 透明  小三角填充色  透明*/
            border-style: dashed dashed solid dashed;
        }
    </style>
</head>
<body>
<div class="bg">
    <!-- 向上的三角形 -->
    <div class="one">
        <span></span>
    </div>
</div>
</body>
</html>

三、调整两个三角形的位置

调整两个三角形的位置，使两者重叠，并且小三角形B位于大三角形A的中心，从而实现带边框的三角形

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>带边框的三角形</title>
    <style>
        /*大三角形（边框）*/
        .one {
            width: 0;
            height: 0;
            display: block;
            border-width: 40px; /* 上：0  左右40  下40 */
            border-style: solid;
            border-color: transparent transparent #fff transparent; /*透明 透明  边框色  透明*/
            margin: 40px auto;
            position: relative;
        }

        /*里面的小三角形*/
        .one span {
            width: 0;
            height: 0;
            display: block;
            border-width: 30px; /* 上：0  左右30  下30 */
            border-color: transparent transparent #A7A7DB transparent; /*透明 透明  小三角填充色  透明*/
            border-style: dashed dashed solid dashed;
            position: absolute;
            top: -24px;
            left: -30px; /*小三角的border-width*/
        }
    </style>
</head>
<body>
<div class="bg">
    <!-- 向上的三角形 -->
    <div class="one">
        <span></span>
    </div>
</div>
</body>
</html>