AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

线CSS实现对比效果

2024-10-12 26
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 线CSS实现对比效果

线CSS实现对比效果，CSS对比效果，传统大家都是用图片来实现对比效果，其实这个对比效果用的理上下两个三角形来做出一个斜体对比效果。

实现的效果是兼容uniapp、微信小程序等不同端的代码

<template>
  <view class="container container23285">
    <view class="flex diygw-col-24 items-stretch flex-nowrap flex48-clz">
      <view class="diygw-col-12 text42-clz"> 看涨 </view>
      <view class="flex diygw-col-0 items-stretch flex-wrap flex57-clz">
        <view class="diygw-col-0 text53-clz"> </view>
        <view class="diygw-col-0 text54-clz"> </view>
      </view>
      <view class="diygw-col-12 text43-clz"> 看跌 </view>
    </view>
    <view class="flex flex-wrap diygw-col-24 flex-direction-column flex41-clz">
      <view class="flex flex-wrap diygw-col-24 justify-between flex42-clz">
        <view class="diygw-col-0 text36-clz"> 60% </view>
        <view class="diygw-col-0 text37-clz"> 40% </view>
      </view>
      <view class="flex diygw-col-24 items-stretch flex-nowrap flex43-clz">
        <view class="diygw-col-14 text38-clz"> </view>
        <view class="flex diygw-col-0 items-stretch flex-wrap flex44-clz">
          <view class="diygw-col-0 text39-clz"> </view>
          <view class="diygw-col-0 text40-clz"> </view>
        </view>
        <view class="diygw-col-12 text41-clz"> </view>
      </view>
      <view class="flex flex-wrap diygw-col-24 justify-between flex45-clz">
        <view class="flex flex-wrap diygw-col-0 items-center flex46-clz">
          <text class="flex icon2 diygw-col-0 icon2-clz diy-icon-appreciate"></text>
          <view class="diygw-col-0 text44-clz"> 看涨 </view>
        </view>
        <view class="flex flex-wrap diygw-col-0 items-center flex47-clz">
          <text class="flex icon3 diygw-col-0 icon3-clz diy-icon-appreciate"></text>
          <view class="diygw-col-0 text45-clz"> 看跌 </view>
        </view>
      </view>
    </view>
    <view class="clearfix"></view>
  </view>
</template>
 
<script>
  export default {
    data() {
      return {
        //用户全局信息
        userInfo: {},
        //页面传参
        globalOption: {},
        //自定义全局变量
        globalData: {}
      };
    },
    onShow() {
      this.setCurrentPage(this);
    },
    onLoad(option) {
      this.setCurrentPage(this);
      if (option) {
        this.setData({
          globalOption: this.getOption(option)
        });
      }
 
      this.init();
    },
    methods: {
      async init() {}
    }
  };
</script>
 
<style lang="scss" scoped>
  .flex48-clz {
    margin-left: 20rpx;
    border-bottom-left-radius: 12rpx;
    overflow: hidden;
    width: calc(100% - 20rpx - 20rpx) !important;
    border-top-left-radius: 12rpx;
    margin-top: 20rpx;
    border-top-right-radius: 12rpx;
    border-bottom-right-radius: 12rpx;
    margin-bottom: 20rpx;
    margin-right: 20rpx;
  }
  .text42-clz {
    background-color: #ff2600;
    padding-top: 10rpx;
    color: #ffffff;
    padding-left: 10rpx;
    font-size: 28rpx !important;
    padding-bottom: 10rpx;
    text-align: center;
    padding-right: 10rpx;
  }
  .flex57-clz {
    flex-shrink: 0;
    width: 100rpx !important;
  }
  .text53-clz {
    flex-shrink: 0;
    color: #ffffff;
    top: 0rpx;
    left: 0rpx;
    flex: 1;
    border-left: 80rpx solid #ff2600;
    width: 0rpx !important;
    font-size: 28rpx !important;
    position: absolute;
    border-bottom: 60rpx solid rgba(255, 255, 255, 0);
    height: 0rpx !important;
    text-align: center;
  }
  .text54-clz {
    border-top: 60rpx solid rgba(255, 255, 255, 0);
    flex-shrink: 0;
    border-right: 80rpx solid #07c160;
    color: #ffffff;
    flex: 1;
    bottom: 0rpx;
    width: 0rpx !important;
    font-size: 28rpx !important;
    position: absolute;
    right: 0rpx;
    height: 0rpx !important;
    text-align: center;
  }
  .text43-clz {
    background-color: #07c160;
    padding-top: 10rpx;
    color: #ffffff;
    padding-left: 10rpx;
    font-size: 28rpx !important;
    padding-bottom: 10rpx;
    text-align: center;
    padding-right: 10rpx;
  }
  .flex41-clz {
    padding-top: 10rpx;
    border-bottom-left-radius: 12rpx;
    padding-left: 10rpx;
    padding-bottom: 10rpx;
    border-top-right-radius: 12rpx;
    margin-right: 20rpx;
    margin-left: 20rpx;
    box-shadow: 0rpx 2rpx 14rpx rgba(31, 31, 31, 0.09);
    overflow: hidden;
    width: calc(100% - 20rpx - 20rpx) !important;
    border-top-left-radius: 12rpx;
    margin-top: 20rpx;
    border-bottom-right-radius: 12rpx;
    background-image: linear-gradient(180deg, rgba(255, 228, 228, 1) 0%, rgba(255, 255, 255, 0) 39%);
    margin-bottom: 20rpx;
    padding-right: 10rpx;
  }
  .flex42-clz {
    margin-left: 10rpx;
    width: calc(100% - 10rpx - 10rpx) !important;
    font-size: 28rpx !important;
    margin-top: 10rpx;
    margin-bottom: 10rpx;
    margin-right: 10rpx;
  }
  .text36-clz {
    color: #ff2600;
  }
  .text37-clz {
    color: #07c160;
  }
  .flex43-clz {
    margin-left: 10rpx;
    border-bottom-left-radius: 12rpx;
    overflow: hidden;
    width: calc(100% - 10rpx - 10rpx) !important;
    border-top-left-radius: 12rpx;
    margin-top: 10rpx;
    border-top-right-radius: 12rpx;
    border-bottom-right-radius: 12rpx;
    margin-bottom: 10rpx;
    margin-right: 10rpx;
  }
  .text38-clz {
    background-color: #ff2600;
    padding-top: 10rpx;
    color: #ffffff;
    padding-left: 10rpx;
    font-size: 28rpx !important;
    padding-bottom: 10rpx;
    text-align: center;
    padding-right: 10rpx;
  }
  .flex44-clz {
    flex-shrink: 0;
    width: 44rpx !important;
    height: 20rpx !important;
  }
  .text39-clz {
    flex-shrink: 0;
    color: #ffffff;
    top: 0rpx;
    left: 0rpx;
    flex: 1;
    border-left: 30rpx solid #ff2600;
    width: 0rpx !important;
    font-size: 28rpx !important;
    position: absolute;
    border-bottom: 20rpx solid rgba(255, 255, 255, 0);
    height: 0rpx !important;
    text-align: center;
  }
  .text40-clz {
    border-top: 20rpx solid rgba(255, 255, 255, 0);
    flex-shrink: 0;
    border-right: 30rpx solid #07c160;
    color: #ffffff;
    flex: 1;
    bottom: 0rpx;
    width: 0rpx !important;
    font-size: 28rpx !important;
    position: absolute;
    right: 0rpx;
    height: 0rpx !important;
    text-align: center;
  }
  .text41-clz {
    background-color: #07c160;
    padding-top: 10rpx;
    color: #ffffff;
    padding-left: 10rpx;
    font-size: 28rpx !important;
    padding-bottom: 10rpx;
    text-align: center;
    padding-right: 10rpx;
  }
  .flex45-clz {
    margin-left: 10rpx;
    width: calc(100% - 10rpx - 10rpx) !important;
    font-size: 28rpx !important;
    margin-top: 10rpx;
    margin-bottom: 10rpx;
    margin-right: 10rpx;
  }
  .flex46-clz {
    background-color: #ffe4e4;
    padding-top: 6rpx;
    border-bottom-left-radius: 120rpx;
    overflow: hidden;
    color: #ff2600;
    padding-left: 30rpx;
    padding-bottom: 6rpx;
    border-top-left-radius: 120rpx;
    border-top-right-radius: 120rpx;
    border-bottom-right-radius: 120rpx;
    padding-right: 30rpx;
  }
  .icon2 {
    font-size: 36rpx;
  }
  .text44-clz {
    font-weight: bold;
    font-size: 28rpx !important;
  }
  .flex47-clz {
    background-color: #e1fff4;
    padding-top: 6rpx;
    border-bottom-left-radius: 120rpx;
    overflow: hidden;
    color: #07c160;
    padding-left: 30rpx;
    padding-bottom: 6rpx;
    border-top-left-radius: 120rpx;
    border-top-right-radius: 120rpx;
    border-bottom-right-radius: 120rpx;
    padding-right: 30rpx;
  }
  .icon3-clz {
    transform: translate(0rpx, 0rpx) rotate(180deg);
  }
  .icon3 {
    font-size: 36rpx;
  }
  .text45-clz {
    font-weight: bold;
    font-size: 28rpx !important;
  }
  .container23285 {
    padding-left: 0px;
    padding-right: 0px;
  }
  .container23285 {
  }
</style>
文章标签：
前端开发
小程序
diygwcom
目录
相关文章
朝阳39
|
7月前
|
前端开发
css特效实例——纯css实现带边角卷边阴影的纸
css特效实例——纯css实现带边角卷边阴影的纸
朝阳39
63 1
daisy`
|
9月前
|
前端开发
css实现风车样式
css实现风车样式
daisy`
51 0
破浪前进
|
9月前
|
前端开发
css流光效果简单版
css流光效果简单版
破浪前进
116 0
祈澈菇凉
|
前端开发
CSS实现中间粗两头细的线条
CSS实现中间粗两头细的线条
祈澈菇凉
117 1
祈澈菇凉
|
前端开发
css时间轴
css时间轴
祈澈菇凉
55 0
派小星_
|
前端开发
CSS阴影
CSS阴影
派小星_
112 0
CSS阴影
羊驼156
CSS3阴影
CSS3阴影
羊驼156
104 0
anny_4243
CSS3颜色
CSS3颜色
anny_4243
143 0
CSS3颜色
张中华
|
前端开发 JavaScript 容器
CSS实例 - CSS 荧光边框
css实例
张中华
219 0
CSS实例 - CSS 荧光边框
游客eigikghkwlybi
|
前端开发 定位技术 索引
【前端第四课】CSS值和单位；CSS文字排版；CSS变换，过渡，动画；CSS定位
【前端第四课】CSS值和单位；CSS文字排版；CSS变换，过渡，动画；CSS定位
游客eigikghkwlybi
169 0
【前端第四课】CSS值和单位；CSS文字排版；CSS变换，过渡，动画；CSS定位

热门文章

最新文章

  • 1
    deepseek部署的详细步骤和方法，基于Ollama获取顶级推理能力！
  • 2
    讨论阶段性给予客户交付物所引发的风险问题
  • 3
    Linus Torvalds将中国亮相LinuxCon + ContainerCon + CloudOpen
  • 4
    DispatcherServlet与初始化主线
  • 5
    网络安全研究人员发现新漏洞：或成另一个WannaCry
  • 6
    Swift中常量和变量的声明
  • 7
    [20160516]adrci purge.txt
  • 8
    Docker Secure Deployment Guidelines
  • 9
    Eclipse没有权限操作rt.jar包中的sun包，导致sun.net.ftp.FtpClient引用报错
  • 10
    Learning Cocos2d-x for WP8（9）——Sprite到哪，我做主
  • 1
    去中心化存储：数据存储的新范式
    117
  • 2
    AI 赋能混合云运维：告别手工操作，迈向智能自愈！
    111
  • 3
    从Excel到大数据：别让工具限制你的思维！
    109
  • 4
    Go 切片导致 rand.Shuffle 产生重复数据的原因与解决方案
    95
  • 5
    基于SVPWM矢量控制的无速度传感器电机控制系统simulink建模与仿真
    34
  • 6
    基于小波变换和峰值搜索的光谱检测matlab仿真,带GUI界面
    37
  • 7
    DragAnything：视频PS来了！开源AI控制器让视频「指哪动哪」：拖拽任意物体轨迹，多对象独立运动一键生成
    37
  • 8
    FoloUp：比HR更懂岗位需求！开源语音面试平台爆火：1份岗位需求生成100问，语音AI追问逻辑漏洞
    23
  • 9
    KTransformers：告别天价显卡！国产框架让单卡24G显存跑DeepSeek-R1 671B大模型：推理速度飙升28倍
    210
  • 10
    基于深度学习的路面裂缝检测算法matlab仿真
    24

    • 相关课程

    更多
  • CSS 快速掌握
  • 前端开发CSS基础

    • 相关电子书

    更多
  • 低代码开发师（初级）实战教程
  • 冬季实战营第三期：MySQL数据库进阶实战
  • 阿里巴巴DevOps 最佳实践手册

    • 相关实验场景

    更多
  • 前端开发基础3：CSS3常见显示属性
  • CSS基础教程
    • 下一篇
    阿里云oss简介和如何对接使用