26 lines
676 B
Markdown
26 lines
676 B
Markdown
# css绘制三角形 #
|
|
由于美工没有切图所以使用css绘制
|
|
## 实现原理 ##
|
|
确定底部将其他边框设置为透明 最后一个确定颜色
|
|
## 实现过程 ##
|
|
![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>
|
|
```
|
|
这样就非常明了了
|
|
如果把宽高设为0
|
|
![title](.local/static/2019/10/2/1574738325016.1574738325016.png)
|
|
如果需要保留底部
|