CSS实现空心尖角的示例代码
<p>我记得之前刷面试题的时候，CSS面试题里面赫然有一题是“<strong>如何用CSS实现三角形</strong>”，我觉得这个问题确实很经典，我上的前端培训班当初就讲过。</p><p><strong>大概思路如下：</strong></p>
<p><strong>先把这个元素（更多时候用的是伪元素）的宽高设为0，然后给它设置一个较大的border-width（大小根据三角形的大小来决定）。这样，4条边实际上都是三角形了。</strong></p>
<p><strong>然后根据三角形的方向和颜色，只设置其中的一个边框颜色为目标颜色，其他三个边框颜色都为透明色，三角形就出来了。</strong></p>
<p>然后再随便设置一下定位，就可以做成类型对话框尖角的效果。</p>
<p>简单写一个示例：</p>
<div class="jb51code"><pre class="brush:xhtml;"><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.sjx {
width: 0;
height: 0;
border: 20px solid transparent;
border-bottom-color: skyblue;
}
</style>
</head>
<body>
<div class="sjx"></div>
</body>
</html></pre></div>
<p style="text-align:center"><img alt="" src="https://img.jbzj.com/file_images/article/202311/2023112216074677.png" /></p>
<p>结果昨天我看到UI图里面出现了空心的尖角，差点气死我：</p>
<p style="text-align:center"><img alt="" src="https://img.jbzj.com/file_images/article/202311/2023112216074678.png" /></p>
<p>本来这个三角形就是用4条边框硬挤出来的，哪里来的多余的边框用来描边？</p>
<p>最后我还是做到了，效果如下：</p>
<p style="text-align:center"><img alt="" src="https://img.jbzj.com/file_images/article/202311/2023112216074679.png" /></p>
<p>思路是这样的：</p>
<p><strong>因为这里有描边，所以border要用在描边这里，那么三角形就不能用border来实现了</strong>。</p>
<p><strong>我这里实际上并不是三角形的，而是正方形的：</strong></p>
<p style="text-align:center"><img alt="" src="https://img.jbzj.com/file_images/article/202311/2023112216074680.png" /></p>
<p>这样看就很明显了，<strong>实际上是放了一个正方形在这里，正方形的背景色跟里面的背景色一样，所以看不出来；</strong></p>
<p><strong>只给这个正方形设置了两条边框，颜色跟外圈的颜色一致；</strong></p>
<p><strong>然后给正方形旋转一个方向，让有边框的朝上，再微调一下位置，就可以了。</strong></p>
<p>代码如下：（定位的代码我就省略了）</p>
<div class="jb51code"><pre class="brush:css;">body.theme-deep .el-popper .popper__arrow::after, body.theme-deep .el-select-dropdown.el-popper .popper__arrow::after, body.theme-deep .el-dropdown-menu.el-popper .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);
}</pre></div>
<p>修改前的效果是这样，实心的蓝色三角形。</p>
<p style="text-align:center"><img alt="" src="https://img.jbzj.com/file_images/article/202311/2023112216074681.png" /></p> 看了楼主的分享，这个思路真的很巧妙啊！
之前我也遇到过类似的需求，当时第一反应是用border来做，结果发现只能做实心的三角形，根本想不到还能用正方形加边框旋转的方法。楼主的思路相当于换了个思路，不执着于用border做三角形，而是用正方形的两条边来模拟尖角的两条边，这个想法很棒！
不过看楼主的代码是用在element-ui的popper组件上的，应该是做下拉框或者tooltip的尖角吧？我自己之前也改过element-ui的样式，不过没用到这么复杂的空心尖角。
想问一下楼主，这个空心尖角的边框宽度能不能动态调整？如果UI图里面的边框粗细变了，是不是改一下width和height还有border的宽度就行了？另外感觉这种实现方式虽然效果好，但是代码看起来确实没有直接用border那么直观，新人接手的话可能需要看半天才能明白原理。不过能解决问题就是好代码！感谢楼主的分享，又学到了新东西！
頁:
[1]