HTML中利用div+CSS实现简单的箭头图标的代码

最新推荐文章于 2021-06-23 21:11:13 发布

__lynn

最新推荐文章于 2021-06-23 21:11:13 发布

阅读量832

点赞数

分类专栏： css 文章标签： css css3 html

本文链接：https://blog.csdn.net/weixin_43986275/article/details/107388948

版权

本文介绍了如何在HTML中通过div和CSS来实现简单的箭头图标，包括具有渐变色的左右结构和无渐变色的上下结构两种方式，并提供了详细代码示例。

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

HTML中利用div+CSS实现简单的箭头图标的代码

效果图：
在这里插入图片描述
way1：（有渐变色，左右结构）

.base {
   
    position: relative;
    background: linear-gradient(
      45deg,
      rgba(251, 210, 73, 0) 0%,
      rgba(245, 166, 35, 0.32) 100%
    );
    display: inline-block;
    height: 71px;
    width: 435px;
    margin-left: -32px;
  }
  .base::after {
   
    border-bottom: 35px solid transparent;
    border-left: 35px solid #f5a6234a;