在画三角形之前,我们先看看三角形是怎么来的:
我们先设定一个大小为0,但是大小相同但是颜色不同的4边框,看看会是什么样的效果:
<style>
div {
width: 0px;
height: 0px;
border-top: 50px solid red;
border-bottom: 50px solid pink;
border-left: 50px solid blue;
border-right: 50px solid yellow;
}
</style>
<body>
<div></div>
</body>
看到这里应该能猜到三角形该怎么画了吧,根据自己需要的三角形方向,然后隐藏另外3个三角形就ok啦!
首先我们先将四个边框都设置好大小和透明色,然后根据自己所需单独给一边设置颜色,就大功告成啦:
div {
width: 0px;
height: 0px;
border: 50px solid transparent;
border-top-color: pink;
}
把四个三角都画出来!
div {
float: left;
}
/* 下三角 */
.div1 {
width: 0px;
height: 0px;
border: 50px solid transparent;
border-top-color: pink;
}
/* 上三角 */
.div2 {
width: 0px;
height: 0px;
border: 50px solid transparent;
border-bottom-color: red;
}
/* 右三角 */
.div3 {
width: 0px;
height: 0px;
border: 50px solid transparent;
border-left-color: skyblue;
}
/* 左三角 */
.div4 {
width: 0px;
height: 0px;
border: 50px solid transparent;
border-right-color: yellow;
}
那么三角有什么用呢?
在各大网站上都有三角的身影,比如CSDN:
还有我们的学习网站bilibili:
那我也来简单做一个小案例吧!
<style>
.list {
margin: 100px auto;
width: 100px;
height: 200px;
border-radius: 5px;
background-color: #fff;
box-shadow: 0px 0px 14px -6px;
position: relative;
display: flex;
flex-direction: column;
}
.triangle {
width: 0;
height: 0;
border: 8px solid transparent;
border-bottom-color: #fff;
/* 利用绝对定位将小三角定位到盒子正上方 */
position: absolute;
top: -16px;
left: 50%;
transform: translateX(-8px);
}
.item {
flex-grow: 1;
display: flex;
align-items: center;
justify-content: center;
}
</style>
<body>
<div class="list">
<div class="triangle"></div> <!-- 小三角 -->
<div class="item">论坛</div>
<div class="item">代码</div>
<div class="item">直播</div>
<div class="item">Chorme插件</div>
<div class="item">能力认证</div>
</div>
</body>
这阴影就有点。。。凑合着看吧!!!