css 三角形制作

先定义一个带边框的盒子

.triangle{
            width: 40px;
            height: 40px;
            border-width: 40px;
            border-style: solid;
            border-color: red green yellow blue;
            margin:40px auto;
        }

<div class="triangle"></div>

效果如图：

image.png

现在把div的高度和宽度设置为0，只留边框来描述宽高

.triangle{
            width: 0px;
            height: 0px;
            border-width: 40px;
            border-style: solid;
            border-color: red green yellow blue;
            margin:40px auto;
        }

如图：

image.png

这样就能清楚的看到每个方向的边框颜色了，如果现在只需要上面的，就把其他三项的边框颜色设为空白；

.triangle{
            width: 0px;
            height: 0px;
            border-width: 40px;
            border-style: solid;
            border-color:red transparent transparent transparent；
            margin:40px auto;
        }

如图：

image.png

同理，我要一个向左的箭头，就留下右边框的颜色

.triangle{
            width: 0px;
            height: 0px;
            border-width: 40px;
            border-style: solid;
            border-color:transparent green transparent transparent;
            margin:40px auto;
        }

如图：

image.png

当然，有些方向的边框并没有提供空间，所以在写边框宽度的时候可以确定，比如需要一个向下的箭头，上，左，右，提供了空间，我们就只需要定义这三个方向的宽度。

.triangle{
            width: 0px;
            height: 0px;
            border-width: 40px 40px 0 40px;
            border-style: solid;
            border-color: red green transparent yellow;
            margin:40px auto;
        }

如图：

image.png

然后设置左右颜色为空白

.triangle{
            width: 0px;
            height: 0px;
            border-width: 40px 40px 0 40px;
            border-style: solid;
            border-color: red transparent transparent transparent;
            margin:40px auto;
        }

如图：

image.png

空心箭头
先定义一个边框宽度为1，宽高为40的盒子

    .empty-triangle{
            width: 40px;
            height: 40px;
            border-width: 1px;
            border-style: solid;
            border-color: red green yellow blue;
            margin:40px auto;
        }

<div class="empty-triangle"></div>

如图：

image.png

然后留下相邻的两边，暂时只要上右

.empty-triangle{
            width: 40px;
            height: 40px;
            border-width: 1px;
            border-style: solid;
            border-color: red green transparent transparent;
            margin:40px auto;
        }

如图：

image.png

最后设置旋转角度，现在设置一个右箭头

.empty-triangle{
            width: 40px;
            height: 40px;
            border-width: 1px;
            border-style: solid;
            border-color: red green transparent transparent;
            margin:40px auto;
                        transform: rotate(45deg);
        }

如图：

image.png

最后写个气泡框

.messagebox{
            margin: 40px auto;
            width: 400px;
            height: 200px;
            background-color: red;
            position: relative;
        }

        .messagebox>.top-arrow{
            display: block;
            border-width: 0px 30px 30px;
            border-style: solid;
            border-color: transparent transparent red;
            position: absolute;
            top: -30px;
            left: 50%;
            margin-left: -30px;
        }

<div class="messagebox">
         <span class="top-arrow"></span>
      </div>

如图：

image.png

最后编辑于：2018.11.13 15:37:06