biji/css绘制三角形.md

31 lines
965 B
Markdown
Raw Normal View History

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
![title](.local/static/2019/10/2/1574738229230.1574738229286.png)
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
![title](.local/static/2019/10/2/1574738325016.1574738325016.png)
2019-11-26 11:20:01 +08:00
如果需要保留底部 将其他部位设为透明色或者背景色
![title](.local/static/2019/10/2/1574738384064.1574738384064.png)
留下bottom
2019-11-26 11:21:01 +08:00
其他同理
最后发现与他相对的位置并没有产生效果
2019-11-26 11:22:01 +08:00
现在是bottom生效 去除掉top的边框 效果不变
然后去除其他位置的试一下吧