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

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;
  }