今天我们来分享一下三角形的制作方法
主要就是通过调整div的几个边框线,将它们调节的足够宽,然后再将div的宽度和长度重新赋值为0
代码如下:
<div id="main"></div>
<style type="text/css" media="all">
#main{
width: 10px;
height: 10px;
background: #000;
margin: 100px auto;
border-top: 50px solid #FF4500;
border-right: 50px solid #48D1CC;
border-bottom: 50px solid #32CD32;
border-left: 50px solid #EE82EE;
}
</style>
在这里我添加了一个div,并为它的几个边框设置了不同的几个颜色,便于我们区分。大家在这里看,是不是边框已经有三角形的样子了,当我们的div的内容足够小,并且边框足够大时,那么它的四个边框就可以默认为是一个三角形了,不妨将div的高和宽重新设置为0;
那么我们下一步去将div的宽度和高度重新赋值,使其为0,效果如下:
#main{
width: 10px;
height: 10px;
background: #000;
margin: 100px auto;
border-top: 50px solid #FF4500;
border-right: 50px solid #48D1CC;
border-bottom: 50px solid #32CD32;
border-left: 50px solid #EE82EE;
width:0;
height:0;
}
现在我们仅仅只需要对几个不同的边框将背景色更改为透明即可。
比如我们需要某一个方向的三角形时候,也就是右边框,则只需要将div的背景颜色以及它之外的几个颜色属性设置为transparent即可,我们在这里设置颜色仅仅只是为了便于观察,在实际设计中完全可以省略掉。
当我们觉得三角形不太美观时,可以将开始的div通过调节它的宽高,使其成为矩形,进而得到我们想要的三角形。三角形可以用在许多方面,比如聊天气泡:
气泡的代码如下:
.main{
position:relative;
width:140px;
height:40px;
top:50vh;
left:100px;
border:1px solid #ccc;
border-radius:6px;
background: #FF8C00;
}
.main:before{
content:"";
position:absolute;
left:-37px;
width:30px;
height:30px;
border-radius:7px;
border-top:20px solid transparent;
border-right:20px solid #ff8c00;
border-left:20px solid transparent;
border-bottom:20px solid transparent;
width:0px;
height:0px;
}
#content{
text-align:center;
}
.side{
position:absolute;
width:20px;
height:20px;
}
还有很多其它的用处在这里就不一一列举,其它更多的用途需要我们大家一起去发现!