问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

css 如何实现带箭头的渐变样式

头像
xinbear
    3891587132

    image.png

    如图 下方箭头的渐变要与上方的渐变保持一致
    请教各位大佬有什么好的实现方式

    csshtml
    阅读 4.2k
    3 个回答
    得票最新
    头像
    XboxYan
      18.2k93790
      ✓ 已被采纳
      头像
      kong_qi
        152
        头像
        渡y4QwE
          914

          如果是纯色背景的话，可以尝试这样：

          <!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>纯色背景</title>
  <style>
    .outer {
      background: linear-gradient(blue, pink);
      width: 550px;
      height: 250px;
    }

    .out {
      position: relative;
      width: 100%;
      height: 100%;
      /* background-color: rgba(0, 0, 0, 0); */
    }

    .left {
      position: absolute;
      left: 0;
      bottom: 0;
      width: 245px;
      height: 0;
      border-bottom: 30px solid rgb(255, 255, 255);
      border-right: 30px solid rgba(0, 0, 0, 0);
    }

    .right {
      position: absolute;
      right: 0;
      bottom: 0;
      width: 245px;
      height: 0;
      border-bottom: 30px solid rgb(255, 255, 255);
      border-left: 30px solid rgba(0, 0, 0, 0);
    }
  </style>
</head>

<body>
  <div class="outer">
    <div class="out">
      <div class="left"></div>
      <div class="right"></div>
    </div>
  </div>

</body>


</html>

          效果图：
          image.png

          撰写回答
          你尚未登录，登录后可以
          • 和开发者交流问题的细节
          • 关注并接收问题和回答的更新提醒
          • 参与内容的编辑和改进，让解决方法与时俱进
          推荐问题