biji/前端/css绘制三角形.md

css绘制三角形

由于美工没有切图所以使用css绘制

实现原理

确定底部将其他边框设置为透明 最后一个确定颜色

实现过程

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 如果需要保留底部 将其他部位设为透明色或者背景色 留下bottom 其他同理 最后发现与他相对的位置并没有产生效果 现在是bottom生效 去除掉top的边框 效果不变 然后去除其他位置的试一下吧！！ 可以产生直角 修改粗细可以产生各式各样的三角形 测试一下吧