triangle

三角形箭头

by Three Tree

HTML

<div class="outer">
    <div class="border_top"></div>
    <div class="mask_top"></div>
    <div class="border_bottom"></div>
    <div class="mask_bottom"></div>
    <div class="border_left"></div>
    <div class="mask_left"></div>
    <div class="border_right"></div>
    <div class="mask_right"></div>
    <div class="border_left_top"></div>
    <div class="mask_left_top"></div>
    <div class="border_top_left"></div>
    <div class="mask_top_left"></div>
    <div class="border_right_top"></div>
    <div class="mask_right_top"></div>
    <div class="border_top_right"></div>
    <div class="mask_top_right"></div>
    <div class="border_left_bottom"></div>
    <div class="mask_left_bottom"></div>
    <div class="border_bottom_left"></div>
    <div class="mask_bottom_left"></div>
    <div class="border_right_bottom"></div>
    <div class="mask_right_bottom"></div>
    <div class="border_bottom_right"></div>
    <div class="mask_bottom_right"></div>
</div>

CSS

.outer {
    position: relative;
    width: 260px;
    height: 260px;
    border: 2px solid #E96A4A;
    margin: 100px;
}
.border_top {
    position: absolute;
    bottom: 100%;
    left: 50%;
    width: 0;
    height: 0;
    border: 32px solid transparent;
    border-bottom-color: #E96A4A;
    margin-left: -32px;
}
.mask_top {
    position: absolute;
    bottom: 100%;
    left: 50%;
    width: 0;
    height: 0;
    border: 30px solid transparent;
    border-bottom-color: #FFF;
    margin-left: -30px;
}
.border_bottom {
    position: absolute;
    top: 100%;
    left: 50%;
    width: 0;
    height: 0;
    border: 32px solid transparent;
    border-top-color: #E96A4A;
    margin-left: -32px;
}
.mask_bottom {
    position: absolute;
    top: 100%;
    left: 50%;
    width: 0;
    height: 0;
    border: 30px solid transparent;
    border-top-color: #FFF;
    margin-left: -30px;
}
.border_left {
    position: absolute;
    right: 100%;
    top: 50%;
    width: 0;
    height: 0;
    border: 32px solid transparent;
    border-right-color: #E96A4A;
    margin-top: -32px;
}
.mask_left {
    position: absolute;
    right: 100%;
    top: 50%;
    width: 0;
    height: 0;
    border: 30px solid transparent;
    border-right-color: #FFF;
    margin-top: -30px;
}
.border_right {
    position: absolute;
    left: 100%;
    top: 50%;
    width: 0;
    height: 0;
    border: 32px solid transparent;
    border-left-color: #E96A4A;
    margin-top: -32px;
}
.mask_right {
    position: absolute;
    left: 100%;
    top: 50%;
    width: 0;
    height: 0;
    border: 30px solid transparent;
    border-left-color: #FFF;
    margin-top: -30px;
}
.border_left_top {
    position: absolute;
    bottom: 100%;
    left: 0;
    width: 0;
    height: 0;
    border: 32px solid transparent;
    border-bottom-color: #E96A4A;
    border-left-color: #E96A4A;
    margin-left: -2px
}
.mask_left_top {
    position: absolute;
    bottom: 100%;
    left: 0;
    width: 0;
    height: 0;
    border: 30px...