2019-11-26 11:13:01 +08:00
|
|
|
# css绘制三角形 #
|
2019-11-26 11:14:01 +08:00
|
|
|
由于美工没有切图所以使用css绘制
|
|
|
|
|
## 实现原理 ##
|
2019-11-26 11:15:01 +08:00
|
|
|
确定底部将其他边框设置为透明 最后一个确定颜色
|
|
|
|
|
## 实现过程 ##
|
2019-11-26 11:18:01 +08:00
|
|
|
css代码
|
|
|
|
|
```
|
|
|
|
|
.box{
|
|
|
|
|
width: 10px;
|
|
|
|
|
height: 10px;
|
|
|
|
|
border-top: red solid 10px;
|
|
|
|
|
border-bottom: blue solid 10px;
|
|
|
|
|
border-left: yellow solid 10px;
|
|
|
|
|
border-right: green solid 10px;
|
|
|
|
|
}
|
|
|
|
|
```
|
|
|
|
|
html
|
|
|
|
|
```
|
|
|
|
|
<div class="box"></div>
|
|
|
|
|
```
|
2019-11-26 11:19:01 +08:00
|
|
|
这样就非常明了了
|
|
|
|
|
如果把宽高设为0
|
|
|
|
|
|
2019-11-26 11:20:01 +08:00
|
|
|
如果需要保留底部 将其他部位设为透明色或者背景色
|
|
|
|
|
|
|
|
|
|
留下bottom
|
2019-11-26 11:21:01 +08:00
|
|
|
其他同理
|
|
|
|
|
最后发现与他相对的位置并没有产生效果
|
2019-11-26 11:22:01 +08:00
|
|
|
现在是bottom生效 去除掉top的边框 效果不变
|
2019-11-26 11:22:54 +08:00
|
|
|
然后去除其他位置的试一下吧！！
|
|
|
|
|
可以产生直角
|
|
|
|
|
修改粗细可以产生各式各样的三角形
|
|
|
|
|
测试一下吧
|
