css实现三角形是经常被问到的问题。
所以下来就讲一下css实现三角形的三种方法:
①.
.tritangle1{
width:0;
height:0;
border-left: 50px solid transparent;
border-right:50px solid transparent;
border-bottom:100px solid red;//这是一个向上的箭头,向左向右向下可以自己写。
}
②.
.list3{
width: 0px;
height: 0px;
border-width:50px;
border-style: solid;
border-color:transparent transparent transparent orange;
}
transparent设置时透明的。顺序为上右下左。
③。实现类似于对话框的形式。
底下的三角形的实现是两个三角形。一个是背景色,一个是边框色。背景色的比边框色少1px,且利用背景色覆盖在边框色上面,就看到的只是边框了。
首先先对元素进行定位。
.messageBox{
position:relative;
width: 240px;
height: 60px;
border:1px solid blue;
background-color: lightgreen;
}
.trangle{
position: absolute;
top:60px;
left: 30px;
width: 0px;
height: 0px;
border-width: 10px;
border-style:solid dashed dashed dashed;
}
.border{ //下面背景色是蓝色的三角形,一会会被上面淡绿色的覆盖掉,只留下蓝色边框
border-color: blue transparent transparent transparent;
}
.bg{
top:59px; //背景的话就稍微往上移一点就可以看到蓝色边框了。
border-color: lightgreen transparent transparent transparent;
}
HTML:
<div class = "messageBox">
<span>这是一段话</span>
<div class = "trangle border"></div>
<div class = "trangle bg"></div>
</div>
④。再做一个对话框,利用css3的transform的旋转45度的方法。
<div class = "messageBox1">
<span>这是一段话</span>
<div class = "trangle1"></div>
</div>
实现的原理是利用一个大的框和一个小的正方形(将来要旋转成三角形的)组成的,首先定位。
.messageBox1{
position:relative;
width: 240px;
height: 60px;
border:1px solid blue;
background-color: lightgreen;
}
.trangle1{
position: absolute;
top:55px;
left: 30px;
width: 10px;
height: 10px;
border:1px;
border-style: solid ;
transform:rotate(45deg);
background-color: lightgreen;
border-color:lightgreen blue blue lightgreen;
}
对于底下三角形的边框就是旋转45度后发现相对于原来来说是右和下是有边框的。所以设置边框。就可以实现了。