甜橘子，专注成都网站制作网站设计与营销型网站建设与优化
QQ :532337155
电话：028-86922220
你好，我这里用CSS实现了三种带边框三角，效果分别如图：
普陀网站制作公司哪家好，找创新互联建站！从网页设计、网站建设、微信开发、APP开发、成都响应式网站建设等网站项目制作，到程序开发，运营维护。创新互联建站于2013年创立到现在10年的时间，我们拥有了丰富的建站经验和运维经验，来保证我们的工作的顺利进行。专注于网站建设就选创新互联建站。
实例代码如下，根据你个人的情况调整代码吧：
!DOCTYPE html
html lang="en"
head
meta charset="UTF-8"
titleArrow/title
/head
body
style
/* scale */
.arrow,
.arrow:after{
position: relative;
display: inline-block;
width: 0;
height: 0;
border-top: 0;
border-left: 30px dotted transparent;
border-right: 30px dotted transparent;
border-bottom: 30px dashed #000;
}
.arrow:after {
position: absolute;
top: 0;
content: '';
transform: translateX(-50%) scale(.8);
border-bottom: 30px dashed #fff;
}
/* width height */
.arrow1,
.arrow1:after {
position: relative;
display: inline-block;
width: 0;
height: 0;
border-top: 0;
border-left: 30px dotted transparent;
border-right: 30px dotted transparent;
border-bottom: 30px dashed #000;
}
.arrow1:after {
position: absolute;
left: -26px;
top: 2px;
content: '';
width: 0;
height: 0;
border-top: 0;
border-left: 26px dotted transparent;
border-right: 26px dotted transparent;
border-bottom: 26px dashed #fff;
}
/* border after */
.arrow2 {
position: relative;
display: inline-block;
width: 28px;
height: 28px;
border: 0;
border-top: 2px solid #000;
border-right: 2px solid #000;
-webkit-transform: translate(7px, 14px) rotate(-45deg);
-ms-transform: translate(7px, 14px) rotate(-45deg);
-o-transform: translate(7px, 14px) rotate(-45deg);
transform: translate(7px, 14px) rotate(-45deg);
}
.arrow2:after {
position: absolute;
left: 0;
top: -2px;
width: 42px;
height: 2px;
content: '';
border-radius: 2px;
background-color: #000;
-webkit-transform-origin: left top;
-moz-transform-origin: left top;
-ms-transform-origin: left top;
-o-transform-origin: left top;
transform-origin: left top;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
/style
span class="arrow"/span
span class="arrow1"/span
span class="arrow2"/span
/body
/html
希望能帮到你，如有疑问请追问，望采纳~
使用CSS制作小三角形实际就是通过控制块元素的边框来实现的。
例如：
style
.triangle-up {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid red;
}
.triangle-down {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-top: 100px solid red;
}
.triangle-left {
width: 0;
height: 0;
border-top: 50px solid transparent;
border-right: 100px solid red;
border-bottom: 50px solid transparent;
}
.triangle-right {
width: 0;
height: 0;
border-top: 50px solid transparent;
border-left: 100px solid red;
border-bottom: 50px solid transparent;
}
/style
div class='triangle-down'/div !--向下三角形--
div class='triangle-up'/div !--向上三角形--
div class='triangle-left'/div !--向左三角形--
div class='triangle-right'/div !--向右三角形--
原理就是设置块元素的三条边透明掉（tranparent）
我们的思路是使用border边框来实现三角形的样式，因为border的边框是由四个三角形组成的。
请点击输入图片描述
首先我们创建一个带边框的div：
具体代码实现如下：
width: 40px;
height: 40px;
border-width: 40px;
border-style: solid;
border-color: red green blue brown;
请点击输入图片描述
然后我们将内部DIV的宽高设置为0：
width: 20px;
height: 20px;
border-width: 10px;
border-style: solid;
border-color: red green blue brown;
请点击输入图片描述
将其他的三个边框给取消点：
width: 0;
height: 0;
border-width: 40px;
border-style: solid;
border-color: red transparent transparent transparent;
请点击输入图片描述
利用更改border的边框，我们可以随意控制写出我们想要的三角形，通过控制边框的大小来实现三角形的大小，通过控制边框的位置来改变三角形的位置。
请点击输入图片描述
6
使用上面的方式实现三角形有一个问题就是，三角形的方位不太好控制，但是使用其他的方式依然会面临这样的问题。
请点击输入图片描述
1、理论
三角形实现原理：宽度width为0；height为0；
（1）有一条横竖边（上下左右）的设置为border-方向：长度 solid red，这个画的就是底部的直线。其他边使用border-方向：长度 solid transparent。
（2）有两个横竖边（上下左右）的设置，若斜边是在三角形的右边，这时候设置top或bottom的直线，和右边的斜线。若斜边是在三角形的左边，这时候设置top或bottom的直线，和左边的斜线。
二、实现
2.1 Triangle Up
#triangle-up {width:0; height:0;
border-left:50px solid transparent;
border-right:50px solid transparent;
border-bottom:100px solid red;}
2.2 Triangle Down
#triangle-down {width:0; height:0;
border-left:50px solid transparent;
border-right:50px solid transparent;
border-top:100px solid red;}
2.3 Triangle Left
#triangle-left {
width:0;
height:0;
border-top:50px solid transparent;
border-right:100px solid red;
border-bottom:50px solid transparent;}
2.4 Triangle Right
#triangle-right {width:0;
height:0;
border-top:50px solid transparent;
border-left:100px solid red;
border-bottom:50px solid transparent;}
2.5 Triangle Top Left
#triangle-topleft {width:0;
height:0;
border-top:100px solid red;
border-right:100px solid transparent;}
2.6 Triangle Top Right
#triangle-topright {width:0;
height:0;
border-top:100px solid red;
border-left:100px solid transparent; }
2.7 Triangle Bottom Left
#triangle-bottomleft {width:0;
height:0;
border-bottom:100px solid red;
border-right:100px solid transparent;}
2.8 Triangle Bottom Right
#triangle-bottomright {width:0;
height:0;
border-bottom:100px solid red;
border-left:100px solid transparent;}
在select外面套一个div ，给这个div设置固定宽度，并且设置overflow:hidden; 然后再给select设置宽度（select的款度要大于外面div的宽度）
.selectbox { width:120px; overflow:hidden; border-right:1px #000 solid;}
select { width:140px;}
div class="selectbox"
selectoptionftwgw/option/select
/div
在日常开发中，经常会用到各种形状的三角形，我们可以通过图标来实现自己先要的效果，但如何用样式快速写出一个适合自己的三角形呢，如果你不太明白请看接下例子。
结果如下：
这样简单的4个不同方位的三角形就做好了，其实实现三角形很简单，为了更直观的看到三角形实现原理我们来看接下来的例子。
结果如下
从图上我们可以清晰的看出，当我们给DOM元素设置宽高为0的时候，此时设置边框，上、下、左、右、将以上图右中圆心散开往外扩展（圆心标点是方便观察点的，真实是不存在的），最终形成一个由四个相同三角形组成的，宽度是border宽度2倍的正方向，每一个三角形正是我们设置的不同方位的border边框。看到这里其实我们想要的三角形效果已经完后，但是还不够完美，细心的小伙伴可能会有疑问。 为什么我设置的宽度是20px,但是却生成了一个宽度为40的正方形 ？那我们就再看一下图例：
图100px;
上图中我们给div设置了宽高，当此的变宽分别变成了一个梯形，在border宽度逐渐缩小的过程中，边框逐渐趋于直线，直到小到肉眼看不清相邻边框拼接处的结合，就成了我们眼中所谓的直线。
反过来亦是如此，让我们的边框设置的很宽的时候，相邻边框相交部位将按照对角线分别形成两个三角形，填充变宽（不然相交处出现空白，4个边框分别外延也就没有边框的意义了），
这也就是为什么我们生成的正方向的宽度是边框2倍的原因。
提到上面一点还想就是提醒小伙伴们，在平时用css绘制三角形的时候，为了避免多占空间，我们可以省去对边边框的设置。
上图例子图像设置除了没有设置下边框，其余的和demo5均相同，我们可看到，箭头依然完好无损，但图标实际占用空间却节省了一半，所有在平时开发中我们要注意这个 隐藏的小坑 ！
好啦,利用css绘制三角形就说到这里，相信小伙伴们早就一目了然， 只要把其中的一条边框的color设置成固定颜色，其他边框color设置透明 ，就可以画出自己心仪的三角形了。通过设置宽度的不同，还可以画出其他不一样的效果哦，是不是很简单，赶紧动手试试吧！