Arrow 三角形(纯CSS)
使用说明
在设计页面的时候会经常使用到三角形，常见的用途是做下拉菜单的指示。一般人会用图片来制作三角，但是图片不方便修改大小和样式风格，其实用纯CSS即可完成各种三角的制作，而且大小、颜色、风格可自由变化，目前至少可以利用两种原理制作纯CSS三角，不信往下看。
厚边原理
请观摩从普通的正方形变成三角形的过程。
- 1、普通的正方形，带单色实边；
- 2、普通的正方形，通过设置
border-color可使之为多色实边； - 3、普通的正方形，通过设置
border-width可使之为多色厚实边； - 4、将多色厚实边的普通正方形的宽高设置为0，会看到一个新的正方形；
- 5、根据需要设置
border-width，可将新正方形变小； - 6、新正方形由四个彩色三角构成，将
border-color四个值的三个设置为transparent，即可得到一个三角形；
<span class="arrow-block-normal"></span>
<span class="arrow-block-border"></span>
<span class="arrow-block-solid"></span>
<span class="arrow-block-blank"></span>
<span class="arrow-block-narrow"></span>
<span class="arrow-block-single"></span>
<style>
.arrow-block-normal{
width: 20px;
height: 20px;
border-width: 1px;
border-style: solid;
border-color:red;
margin:20px;
}
.arrow-block-border{
width: 20px;
height: 20px;
border-width: 1px;
border-style: solid;
border-color:red green blue black;
margin:20px;
}
.arrow-block-solid{
width: 20px;
height: 20px;
border-width: 20px;
border-style: solid;
border-color:red green blue black;
margin:20px;
}
.arrow-block-blank{
width: 0;
height: 0;
border-width: 20px;
border-style: solid;
border-color:red green blue black;
margin:20px;
}
.arrow-block-narrow{
width: 0;
height: 0;
border-width: 8px;
border-style: solid;
border-color:red green blue black;
margin:20px;
}
.arrow-block-single{
width: 0;
height: 0;
border-width: 8px;
border-style: solid;
border-color:red transparent transparent transparent;
margin:20px;
}
</style>
利用厚边制作三角
根据以上原理，我们便可以做出至少8种实体三角形。
<span class="arrow-down"></span>
<span class="arrow-left"></span>
<span class="arrow-up"></span>
<span class="arrow-right"></span>
<span class="arrow-rt"></span>
<span class="arrow-lt"></span>
<span class="arrow-lb"></span>
<span class="arrow-rb"></span>
<style>
.arrow-down{
width: 0;
height: 0;
border-width: 20px;
border-style: solid;
border-color:red transparent transparent transparent;
margin:20px;
}
.arrow-left{
width: 0;
height: 0;
border-width: 20px;
border-style: solid;
border-color:transparent green transparent transparent;
margin:20px;
}
.arrow-up{
width: 0;
height: 0;
border-width: 20px;
border-style: solid;
border-color:transparent transparent blue transparent;
margin:20px;
}
.arrow-right{
width: 0;
height: 0;
border-width: 20px;
border-style: solid;
border-color:transparent transparent transparent black;
margin:20px;
}
.arrow-rt{
width: 0;
height: 0;
border-width: 20px;
border-style: solid;
border-color:black transparent transparent black;
margin:20px;
}
.arrow-lt{
width: 0;
height: 0;
border-width: 20px;
border-style: solid;
border-color: black black transparent transparent;
margin:20px;
}
.arrow-lb{
width: 0;
height: 0;
border-width: 20px;
border-style: solid;
border-color: transparent black black transparent;
margin:20px;
}
.arrow-rb{
width: 0;
height: 0;
border-width: 20px;
border-style: solid;
border-color: transparent transparent black black ;
margin:20px;
}
</style>
旋转原理
请观摩从普通的正方形变成三角形的过程。
- 1、普通的正方形，无边带背景色；
- 2、用
linear-gradient方法设置某角度的渐变背景色； - 3、在渐变背景色基础上使用渐变百分比，使背景产生精确的颜色区分；
- 4、通过
rotate方法旋转角度，得到一个向下的指示箭头； - 5、对得到的三角设置宽高，使之符合实际需要；
- 6、将背景色设置为白色，同时给她设置1px的投影；
<span class="rotate-normal"></span>
<span class="rotate-gradient"></span>
<span class="rotate-exact"></span>
<span class="rotate-rotate"></span>
<span class="rotate-scale"></span>
<span class="rotate-solid"></span>
<style>
.rotate-normal{
width: 20px;
height: 20px;
background-color:red;
margin:20px;
}
.rotate-gradient{
width: 20px;
height: 20px;
background: linear-gradient(135deg, transparent , red);
margin:20px;
}
.rotate-exact{
width: 20px;
height: 20px;
background: linear-gradient(135deg, transparent 50%,red 50%, red 100%);
margin:20px;
}
.rotate-rotate{
width: 20px;
height: 20px;
background: linear-gradient(135deg, transparent 50%,red 50%, red 100%);
transform: rotate(45deg);
margin:20px;
}
.rotate-scale{
width: 12px;
height: 12px;
background: linear-gradient(135deg, transparent 50%,red 50%, red 100%);
transform: rotate(45deg);
margin:20px;
}
.rotate-solid{
width: 12px;
height: 12px;
background: linear-gradient(135deg, transparent 50%,white 50%, white 100%);
transform: rotate(45deg);
box-shadow: 1px 1px 0 #ccc;
margin:20px;
}
</style>
利用旋转制作三角
根据以上原理，我们便可以做出至少8种实体三角形和4中带边三角。
<span class="rotate-down"></span>
<span class="rotate-left"></span>
<span class="rotate-right"></span>
<span class="rotate-up"></span>
<span class="rotate-rb"></span>
<span class="rotate-rt"></span>
<span class="rotate-lb"></span>
<span class="rotate-lt"></span>
<span class="rotate-down-shadow"></span>
<span class="rotate-left-shadow"></span>
<span class="rotate-right-shadow"></span>
<span class="rotate-up-shadow"></span>
<style>
.rotate-down{
width:20px;
height:20px;
background: linear-gradient(135deg, transparent 50%,red 50%, red 100%);
transform: rotate(45deg);
margin:20px;
}
.rotate-left{
width:20px;
height:20px;
background: linear-gradient(135deg, transparent 50%,red 50%, red 100%);
transform: rotate(135deg);
margin:20px;
}
.rotate-right{
width:20px;
height:20px;
background: linear-gradient(135deg, transparent 50%,red 50%, red 100%);
transform: rotate(-45deg);
margin:20px;
}
.rotate-up{
width:20px;
height:20px;
background: linear-gradient(135deg, transparent 50%,red 50%, red 100%);
transform: rotate(-135deg);
margin:20px;
}
.rotate-rb{
width:20px;
height:20px;
background: linear-gradient(135deg, transparent 50%,red 50%, red 100%);
transform: rotate(90deg);
margin:20px;
}
.rotate-rt{
width:20px;
height:20px;
background: linear-gradient(135deg, transparent 50%,red 50%, red 100%);
transform: rotate(180deg);
margin:20px;
}
.rotate-lb{
width:20px;
height:20px;
background: linear-gradient(135deg, transparent 50%,red 50%, red 100%);
transform: rotate(-90deg);
margin:20px;
}
.rotate-lt{
width:20px;
height:20px;
background: linear-gradient(135deg, transparent 50%,red 50%, red 100%);
transform: rotate(-180deg);
margin:20px;
}
.rotate-down-shadow{
width:20px;
height:20px;
background: linear-gradient(135deg, transparent 50%,#fff 50%, #fff 100%);
transform: rotate(45deg);
box-shadow: 1px 1px 0 #ccc;
margin:20px;
}
.rotate-left-shadow{
width:20px;
height:20px;
background: linear-gradient(135deg, transparent 50%,#fff 50%, #fff 100%);
transform: rotate(135deg);
box-shadow: 1px 1px 0 #ccc;
margin:20px;
}
.rotate-right-shadow{
width:20px;
height:20px;
background: linear-gradient(135deg, transparent 50%,#fff 50%, #fff 100%);
transform: rotate(-45deg);
box-shadow: 1px 1px 0 #ccc;
margin:20px;
}
.rotate-up-shadow{
width:20px;
height:20px;
background: linear-gradient(135deg, transparent 50%,#fff 50%,#fff 100%);
transform: rotate(-135deg);
box-shadow: 1px 1px 0 #ccc;
margin:20px;
}
</style>
三角的灰边除了用box-shadow制作之外，也可以使用border来制作。
<span class="rotate-down-border"></span>
<span class="rotate-left-border"></span>
<span class="rotate-right-border"></span>
<span class="rotate-up-border"></span>
<style>
.rotate-down-border{
width:20px;
height:20px;
background: linear-gradient(135deg, transparent 50%,#fff 50%, #fff 100%);
transform: rotate(45deg);
border-bottom:1px solid #ccc;
border-right:1px solid #ccc;
margin:20px;
}
.rotate-left-border{
width:20px;
height:20px;
background: linear-gradient(135deg, transparent 50%,#fff 50%, #fff 100%);
transform: rotate(135deg);
border-bottom:1px solid #ccc;
border-right:1px solid #ccc;
margin:20px;
}
.rotate-right-border{
width:20px;
height:20px;
background: linear-gradient(135deg, transparent 50%,#fff 50%, #fff 100%);
transform: rotate(-45deg);
border-bottom:1px solid #ccc;
border-right:1px solid #ccc;
margin:20px;
}
.rotate-up-border{
width:20px;
height:20px;
background: linear-gradient(135deg, transparent 50%,#fff 50%,#fff 100%);
transform: rotate(-135deg);
border-bottom:1px solid #ccc;
border-right:1px solid #ccc;
margin:20px;
}
</style>
实际应用
白底灰边实例。
中国，是以华夏文明为源泉、中华文化为基础，并以汉族为主体民族的多民族国家，通用汉语、汉字，汉族与少数民族被统称为“中华民族”，又自称为炎黄子孙、龙的传人。
中国，是以华夏文明为源泉、中华文化为基础，并以汉族为主体民族的多民族国家，通用汉语、汉字，汉族与少数民族被统称为“中华民族”，又自称为炎黄子孙、龙的传人。
中国，是以华夏文明为源泉、中华文化为基础，并以汉族为主体民族的多民族国家，通用汉语、汉字，汉族与少数民族被统称为“中华民族”，又自称为炎黄子孙、龙的传人。
中国，是以华夏文明为源泉、中华文化为基础，并以汉族为主体民族的多民族国家，通用汉语、汉字，汉族与少数民族被统称为“中华民族”，又自称为炎黄子孙、龙的传人。
<div class="lightblock block-down">...</div>
<div class="lightblock block-left">...</div>
<div class="lightblock block-up">...</div>
<div class="lightblock block-right">...</div>
<style>
.lightblock{
width:340px;
height:120px;
background-color: #fff;
border:1px solid #ccc;
position: relative;
margin:20px;
padding:20px;
position: relative;
float: left;
}
.lightblock.block-down:after{
content: '';
position: absolute;
bottom:-6px;
left:20px;
width:12px;
height:12px;
background: linear-gradient(135deg, transparent 50%,#fff 50%, #fff 100%);
transform: rotate(45deg);
box-shadow: 1px 1px 0 #ccc;
}
.lightblock.block-left:after{
content: '';
position: absolute;
left:-6px;
top:20px;
width:12px;
height:12px;
background: linear-gradient(135deg, transparent 50%,#fff 50%, #fff 100%);
transform: rotate(135deg);
box-shadow: 1px 1px 0 #ccc;
}
.lightblock.block-up:after{
content: '';
position: absolute;
top:-6px;
left:20px;
width:12px;
height:12px;
background: linear-gradient(135deg, transparent 50%,#fff 50%, #fff 100%);
transform: rotate(-135deg);
box-shadow: 1px 1px 0 #ccc;
}
.lightblock.block-right:after{
content: '';
position: absolute;
right:-6px;
top:20px;
width:12px;
height:12px;
background: linear-gradient(135deg, transparent 50%,#fff 50%, #fff 100%);
transform: rotate(-45deg);
box-shadow: 1px 1px 0 #ccc;
}
</style>
深底无边实例。
中国，是以华夏文明为源泉、中华文化为基础，并以汉族为主体民族的多民族国家，通用汉语、汉字，汉族与少数民族被统称为“中华民族”，又自称为炎黄子孙、龙的传人。
中国，是以华夏文明为源泉、中华文化为基础，并以汉族为主体民族的多民族国家，通用汉语、汉字，汉族与少数民族被统称为“中华民族”，又自称为炎黄子孙、龙的传人。
中国，是以华夏文明为源泉、中华文化为基础，并以汉族为主体民族的多民族国家，通用汉语、汉字，汉族与少数民族被统称为“中华民族”，又自称为炎黄子孙、龙的传人。
中国，是以华夏文明为源泉、中华文化为基础，并以汉族为主体民族的多民族国家，通用汉语、汉字，汉族与少数民族被统称为“中华民族”，又自称为炎黄子孙、龙的传人。
<div class="deepblock block-down">...</div>
<div class="deepblock block-left">...</div>
<div class="deepblock block-up">...</div>
<div class="deepblock block-right">...</div>
<style>
.deepblock{
width:340px;
height:120px;
background-color: rgba(0,0,0,.8);
color: #fff;
position: relative;
margin:20px;
padding:20px;
position: relative;
float: left;
}
.deepblock.block-down:after{
content: '';
position: absolute;
bottom:-6px;
left:20px;
width:12px;
height:12px;
background: linear-gradient(135deg, transparent 50%,rgba(0,0,0,.8) 50%, rgba(0,0,0,.8) 100%);
transform: rotate(45deg);
}
.deepblock.block-left:after{
content: '';
position: absolute;
left:-6px;
top:20px;
width:12px;
height:12px;
background: linear-gradient(135deg, transparent 50%,rgba(0,0,0,.8) 50%, rgba(0,0,0,.8) 100%);
transform: rotate(135deg);
}
.deepblock.block-up:after{
content: '';
position: absolute;
top:-6px;
left:20px;
width:12px;
height:12px;
background: linear-gradient(135deg, transparent 50%,rgba(0,0,0,.8) 50%, rgba(0,0,0,.8) 100%);
transform: rotate(-135deg);
}
.deepblock.block-right:after{
content: '';
position: absolute;
right:-6px;
top:20px;
width:12px;
height:12px;
background: linear-gradient(135deg, transparent 50%,rgba(0,0,0,.8) 50%, rgba(0,0,0,.8) 100%);
transform: rotate(-45deg);
}
</style>
其他风格。
中国，是以华夏文明为源泉、中华文化为基础，并以汉族为主体民族的多民族国家，通用汉语、汉字，汉族与少数民族被统称为“中华民族”，又自称为炎黄子孙、龙的传人。
中国，是以华夏文明为源泉、中华文化为基础，并以汉族为主体民族的多民族国家，通用汉语、汉字，汉族与少数民族被统称为“中华民族”，又自称为炎黄子孙、龙的传人。
<div class="roundblock">...</div>
<div class="shadowblock">...</div>
<style>
.roundblock{
width:340px;
height:120px;
background-color: #fff;
border:1px solid #ccc;
position: relative;
margin:20px;
padding:20px;
border-radius:6px;
float: left;
}
.roundblock:after{
content: '';
position: absolute;
bottom:-6px;
left:20px;
width:12px;
height:12px;
background: linear-gradient(135deg, transparent 50%,#fff 50%, #fff 100%);
transform: rotate(45deg);
border-bottom-right-radius:4px;
box-shadow: 1px 1px 0 #ccc;
}
.shadowblock{
width:340px;
height:120px;
background-color: #fff;
position: relative;
margin:20px;
padding:20px;
box-shadow: 1px 1px 10px rgba(0,0,0,.1);
border-radius:6px;
float: left;
}
.shadowblock:after{
content: '';
position: absolute;
bottom:-6px;
left:20px;
width:12px;
height:12px;
background: linear-gradient(135deg, transparent 50%,#fff 50%, #fff 100%);
transform: rotate(45deg);
box-shadow: 1px 1px 0 #f0f0f0;
}
</style>