css 使用border画的三角形，如何添加阴影

最新推荐文章于 2024-08-01 16:11:48 发布

小熊海啸

最新推荐文章于 2024-08-01 16:11:48 发布

阅读量2k

点赞数 1

分类专栏：样式踩坑文章标签： http css 前端 html5

本文链接：https://blog.csdn.net/weixin_42302145/article/details/121561240

版权

样式踩坑专栏收录该内容

2 篇文章 0 订阅

订阅专栏

先上效果图

我们给元素添加阴影，一般是使用border来添加，但是由于三角形本身就是用border画出来的，所以在添加阴影时，需要使用其他的思路。（给元素添加伪类！）

这是三角形的代码

.arrow {
    border: 5px solid transparent;
    content: '';
    position: absolute;
    left: -10px;
    top: 10px;
    border-right-color: #f6f6f6;
    display: inherit；
}

给三角形添加伪类，搞定！

.arrow::after {
  content: '';
  border-style: solid;
  border-width: 0px 0px 0px 0px;
  position: absolute;
  left: 4px;
  z-index: -1;
  box-shadow: -2px 1px 9px 2px grey;
}