# 利用css构造边框三角

## 绘制三角形

``````<!DOCTYPE html>
<html>

<meta charset="utf-8">
<title></title>
<style type="text/css">
.triangle_top,
.triangle_bottom,
.triangle_left,
.triangle_right {
width: 0;
height: 0;
margin: 20px;
position: relative;
float: left;
}

.triangle_top {
border-left: 100px solid transparent;
border-right: 100px solid transparent;
border-bottom: 100px solid #06AC68;
}

.triangle_right {
border-top: 100px solid transparent;
border-bottom: 100px solid transparent;
border-left: 100px solid #06AC68;
}

.triangle_bottom {
border-left: 100px solid transparent;
border-right: 100px solid transparent;
border-top: 100px solid #06AC68;
}

.triangle_left {
border-top: 100px solid transparent;
border-bottom: 100px solid transparent;
border-right: 100px solid #06AC68;
}
</style>

<body>
<!--三角 - 上-->
<div class="triangle_top"></div>

<!--三角 - 右-->
<div class="triangle_right"></div>

<!--三角 - 下-->
<div class="triangle_bottom"></div>

<!--三角 - 左-->
<div class="triangle_left"></div>
</body>

</html>``````

## 空心三角

``````<!DOCTYPE html>
<html>

<meta charset="utf-8">
<title></title>
<style type="text/css">
.triangle_top,
.triangle_right,
.triangle_bottom,
.triangle_left {
width: 100px;
height: 100px;
position: relative;
border: 1px solid #06AC68;
background-color: #FFF;
margin: 20px;
position: relative;
float: left;
}

.triangle_top:before {
content: "";
border: 10px solid transparent;
border-bottom-color: #CCC;
position: absolute;
left: 40px;
top: -20px;
}

.triangle_top:after {
content: "";
border: 10px solid transparent;
border-bottom-color: #FFF;
position: absolute;
left: 40px;
top: -19px;
}

.triangle_right:before {
content: "";
border: 10px solid transparent;
border-left-color: #CCC;
position: absolute;
left: 100px;
top: 40px;
}

.triangle_right:after {
content: "";
border: 10px solid transparent;
border-left-color: #FFF;
position: absolute;
left: 99px;
top: 40px;
}

.triangle_bottom:before {
content: "";
border: 10px solid transparent;
border-top-color: #CCC;
position: absolute;
left: 40px;
top: 100px;
}

.triangle_bottom:after {
content: "";
border: 10px solid transparent;
border-top-color: #FFF;
position: absolute;
left: 40px;
top: 99px;
}

.triangle_left:before {
content: "";
border: 10px solid transparent;
border-right-color: #CCC;
position: absolute;
left: -20px;
top: 40px;
}

.triangle_left:after {
content: "";
border: 10px solid transparent;
border-right-color: #FFF;
position: absolute;
left: -19px;
top: 40px;
}
</style>

<body>
<!-- 三角 - 上 -->
<div class="triangle_top"></div>

<!-- 三角 - 右 -->
<div class="triangle_right"></div>

<!-- 三角 - 下 -->
<div class="triangle_bottom"></div>

<!-- 三角 - 左 -->
<div class="triangle_left"></div>
</body>

</html>
``````

## 实心三角

``````<!DOCTYPE html>
<html>

<meta charset="utf-8">
<title></title>
<style type="text/css">
.triangle_top,
.triangle_right,
.triangle_bottom,
.triangle_left {
width: 100px;
height: 100px;
background: #06AC68;
margin: 20px;
position: relative;
float: left;
}

.triangle_top:before {
content: "";
width: 0px;
height: 0px;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 10px solid #CCCCCC;
position: absolute;
top: -10px;
left: 42px;
}

.triangle_right:before {
content: "";
width: 0px;
height: 0px;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
border-left: 10px solid #CCCCCC;
position: absolute;
top: 42px;
right: -10px;
}

.triangle_bottom:before {
content: "";
width: 0px;
height: 0px;
border-top: 10px solid #CCCCCC;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
position: absolute;
top: 100px;
left: 42px;
}

.triangle_left:before {
content: "";
width: 0px;
height: 0px;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
border-right: 10px solid #CCCCCC;
position: absolute;
top: 40px;
left: -10px;
}
</style>

<body>
<!--三角 - 上-->
<div class="triangle_top"></div>

<!--三角 - 右-->
<div class="triangle_right"></div>

<!--三角 - 下-->
<div class="triangle_bottom"></div>

<!--三角 - 左-->
<div class="triangle_left"></div>
</body>

</html>``````
7 声望
0 粉丝
0 条评论