web前端入门到实战：CSS实现带阴影的三角形

最新推荐文章于 2023-05-10 17:02:50 发布

魔方编程

最新推荐文章于 2023-05-10 17:02:50 发布

阅读量441

点赞数

文章标签： css web前端前端前端开发前端基础

本文链接：https://blog.csdn.net/wewfdf/article/details/99762274

版权

本文介绍了如何使用CSS创建带阴影的三角形，详细讨论了边框法和transform方法存在的问题及优化方案，强调了drop-shadow在实现真正投影中的作用，并提供了最终的解决方案代码。

摘要由CSDN通过智能技术生成

怎么用CSS画一个带阴影的三角形呢 ?

有童鞋说, 这还不简单吗

网上有很多解决方案, 但其实大多都是实现不太完美的, 存在一些问题

假设我们做一个向下的三角形箭头

常见的方法大致有两种

1.通过边框控制, border-left和border-right设为透明, border-top设为预定的颜色即可
2.通过 transform 旋转盒子

设计

2.1 边框法

html结构

<body>
    <div class="box"></div>
</body>

css样式

.box {
    position: relative;
    width: 200px;
    height: 100px;
    background: #ff8605;
    box-shadow: 2px 2px 2px rgba(0, 0, 0, .2);
}
.box::after {
    content: '';
    position: absolute;
    bottom: -9px;
    left: 45px;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 10px solid #ff8605;
}

对web前端这门技术感兴趣的小伙伴可以加入到我们的学习圈来，正因为我不是211，985，只是个普通的本科生，英语不是特别好&#x