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

线CSS实现对比效果

2024-10-12 12
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 线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
目录
相关文章
a15034260562-24955
|
5月前
|
前端开发 内存技术
CSS动画示例（上一篇是CSS过渡…）
CSS动画示例（上一篇是CSS过渡…）
a15034260562-24955
64 1
朝阳39
|
3月前
|
前端开发
css特效实例——纯css实现带边角卷边阴影的纸
css特效实例——纯css实现带边角卷边阴影的纸
朝阳39
30 1
夏天49597
|
4月前
|
前端开发 JavaScript 开发者
CSS基础-CSS3过渡与动画
【6月更文挑战第11天】本文介绍了CSS3的过渡和动画特性，用于创建平滑的视觉效果。过渡通过`transition`属性实现元素样式改变的缓动效果，常用于按钮悬停、图片切换等场景。易错点包括忘记设置初始和最终样式，以及过渡效果不明显。动画则利用`@keyframes`定义关键帧序列，适用于循环播放的图标旋转等复杂效果。动画的错误可能在于结束状态处理和无限循环的性能问题。通过代码示例和避免常见陷阱，开发者能更好地利用CSS3动画提升网页交互体验。关键在于适度使用，保持界面流畅舒适。
夏天49597
69 2
祈澈菇凉
|
11月前
|
前端开发
CSS实现中间粗两头细的线条
CSS实现中间粗两头细的线条
祈澈菇凉
84 1
祈澈菇凉
|
11月前
|
前端开发
css时间轴
css时间轴
祈澈菇凉
41 0
timfan
|
前端开发 容器
纯CSS实现3D效果的立方体
当使用css属性perspective的时候，需要一个容器并设置perspective depth值，然后让它的子元素在这个容器中做运动
timfan
165 0
纯CSS实现3D效果的立方体
yma16
|
前端开发
css_跳动的心
css_跳动的心
yma16
80 0
游客ruqdfvh2iuyqc
|
前端开发
css3实现正方体 纯css
css3实现正方体 纯css
游客ruqdfvh2iuyqc
80 0
css3实现正方体 纯css
anny_4243
CSS3颜色
CSS3颜色
anny_4243
114 0
CSS3颜色
前端充电宝
|
前端开发 开发者
纯 CSS 实现三角形的 3 种方式
CSS 提供了三种出色的方法可以实现基本的形状。本文就来看看如何使用这些方法来实现一个三角形。三种方法如下： border； linear-gradient； clip-path。
前端充电宝
487 0