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

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;
    border-top: 35px solid transparent;
    content: '';
    height: 0;
    left: 435px;
    position: absolute;
    top: 0px;
  }

······················································································································
way2：无渐变色（上下结构）

 .base {
    margin-top: 45px;
    position: relative;
    width: 470px;
    // height: 71px;
    border-top: 35px solid #f5a6234a;
    border-right: 35px solid transparent;
    border-left: 0px solid transparent;
    background: linear-gradient(
      45deg,
      rgba(251, 210, 73, 0) 0%,
      rgba(245, 166, 35, 0.32) 100%
    );
  }
  .base::before {
    content: '';
    position: absolute;
    height: 0;
    width: 470px;
    border-bottom: 35px solid #f5a6234a;
    border-left: 0px solid transparent;
    border-right: 35px solid transparent;
    background: linear-gradient(
      45deg,
      rgba(251, 210, 73, 0) 0%,
      rgba(245, 166, 35, 0.32) 100%
    );
    top: -70px;
    left: 0;
  }

···································································································································

way2:扩展

.base {
    margin-top: 45px;
    position: relative;
    width: 470px;
    border-top: 35px solid #f5a6234a;
    border-right: 35px solid transparent;
    border-left:35px solid transparent;
    background: linear-gradient(
      45deg,
      rgba(251, 210, 73, 0) 0%,
      rgba(245, 166, 35, 0.32) 100%
    );
  }
  .base::before {
    content: '';
    position: absolute;
    height: 0;
    width: 470px;
    border-bottom: 35px solid #f5a6234a;
    border-left: 35px solid transparent;
    border-right: 35px solid transparent;
    background: linear-gradient(
      45deg,
      rgba(251, 210, 73, 0) 0%,
      rgba(245, 166, 35, 0.32) 100%
    );
    top: -70px;
    left: -35px;
  }

本文地址：https://blog.csdn.net/weixin_43986275/article/details/107388948