母婴产品网站模板,企业建设网站需注意哪些事项,成都微信网站制作,施工企业在其施工资质许可内自建自用的工程大家好#xff0c;我是南宫#xff0c;来分享一个昨天解决的问题。
我记得之前刷面试题的时候#xff0c;CSS面试题里面赫然有一题是“如何用CSS实现三角形”#xff0c;我觉得这个问题确实很经典#xff0c;我上的前端培训班当初就讲过。
大概思路如下#xff1a;
先…大家好我是南宫来分享一个昨天解决的问题。
我记得之前刷面试题的时候CSS面试题里面赫然有一题是“如何用CSS实现三角形”我觉得这个问题确实很经典我上的前端培训班当初就讲过。
大概思路如下
先把这个元素更多时候用的是伪元素的宽高设为0然后给它设置一个较大的border-width大小根据三角形的大小来决定。这样4条边实际上都是三角形了。
然后根据三角形的方向和颜色只设置其中的一个边框颜色为目标颜色其他三个边框颜色都为透明色三角形就出来了。
然后再随便设置一下定位就可以做成类型对话框尖角的效果。
简单写一个示例
!DOCTYPE html
htmlheadmeta charsetutf-8title/titlestyle.sjx {width: 0;height: 0;border: 20px solid transparent;border-bottom-color: skyblue;}/style/headbodydiv classsjx/div/body
/html 结果昨天我看到UI图里面出现了空心的尖角差点气死我 本来这个三角形就是用4条边框硬挤出来的哪里来的多余的边框用来描边
最后我还是做到了效果如下 思路是这样的
因为这里有描边所以border要用在描边这里那么三角形就不能用border来实现了。
我这里实际上并不是三角形的而是正方形的 这样看就很明显了实际上是放了一个正方形在这里正方形的背景色跟里面的背景色一样所以看不出来
只给这个正方形设置了两条边框颜色跟外圈的颜色一致
然后给正方形旋转一个方向让有边框的朝上再微调一下位置就可以了。
代码如下定位的代码我就省略了
body.theme-deep .el-popper[x-placement^bottom] .popper__arrow::after, body.theme-deep .el-select-dropdown.el-popper[x-placement^bottom] .popper__arrow::after, body.theme-deep .el-dropdown-menu.el-popper[x-placement^bottom] .popper__arrow::after {width: 9px;height: 9px;border: none;border-top: 1px solid #0c84ff;border-right: 1px solid #0c84ff;background: #0b3277;transform: rotate(-45deg) translateX(2px) translateY(1px);
}
修改前的效果是这样实心的蓝色三角形。
