纯CSS3三角形按钮，带描边及投影，可以实现吗？

Posted 2023-04-13

请知道的大神解答一下，谢谢
如图，这两种

<div class="arrow-up">
    <!--顶角向上的三角形-->
</div>

<style type="text/css">
.arrow-up 
    width:0; 
    height:0; 
    border-left:30px solid transparent;
    border-right:30px solid transparent;
    border-bottom:30px solid #fff;

</style>

效果如下图：

要实现不同方向的三角形，调整四条边的 border 样式属性就行了

追问

我要的是白底，两个角上有黑色边框的箭头，这个只是白底的，最好三角的边框下面还有渐影的投影

追答

这就不是单纯的css 了，你给的那张图里面，人家的三角用的是一张图片，不是单纯css 写的

追问

设计师做的图，用图片切的话有点麻烦，想看下有没有简单的方法

追答

像这种特殊的情况，现在通用的方式基本都是用图片来代替的。要不反倒复杂化了。

如果实在要用css 来做，不是不可以，只是在这块的布局和写法上就不是简单的几句css 能解决了。
可以给你说一下思路，如果想写的话，你可以自己去试一下（单说那个三角形缺口的地方）；
定义一个容器 div，这个是四四方方没有缺口的矩形，然后在容器里面再堆一个 div，样式就是如上图的纯三角形样式，这个 div 就是所需的缺口，或者说箭头，最后再去调整箭头的位置或其他样式

参考技术A 用SVG吧。出来的效果不好。 参考技术B 效果图什么样子？追问

纯css做三角形图标

以前做三角形图标一直是用图片，或者css3旋转，现在才发现原来还有这么简单的三角形

div {

　　border: 10px solid transparent;
　　border-bottom: 10px solid #000;
　　width: 0;

}

只要这么简单的三行css就可以实现一个三角形！