线CSS实现对比效果

于 2023-12-31 11:19:28 发布
阅读量420 收藏 7
点赞数 7
文章标签： css 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/luck332/article/details/135314256
版权

线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
关注
使用css实现对角线功能，百分比对比
柠檬不萌只是酸i
08-12 3207
实现的最终结果如下：（也可直接运行代码查看效果） 实现过程： （1）使用css的渐变实现对角线 对角线的实现 linear-gradient(45deg,red 30px,pink 0); （2）-135deg -45deg 45deg 135deg 也就是说，四个角斜切的方位是按照不同的度数来完成的。 代码如下： <...
比较两个css的比对器,css选择器对比
weixin_31623707的博客
08-03 587
1.标签选择器标签选择器也就是html中的标签，如,等css选择器/* 标签选择器 */p{font-size: 20px;color: red;text-align: center;}勇气测试标签选择器结果如图图一2.类选择器类选择器是css代码中最常用到的使用如下css选择器/* 类选择器 命名格式 .类选择器名称{}*/.setRedColor{color: red;font-size:...
文本比较/文本对比在线工具
hello world
11-11 1876
在线文本差异对比,文本比对、文本比较工具在线文本比较工具-文本/Html/Css代码对比工具-文字内容在线对比工具
html源代码在线对比,9款让你眼前一亮的HTML5/CSS3示例及源码
weixin_29641609的博客
05-31 509
本文作者html5tricks，转载请注明出处下面分享的这9款1、还记得之前分享过的两款HTML53D波浪动画特效么？它们是纯CSS3/HTML5实现3D波浪形动画和HTML5 WebGL实验 超酷的HTML5 Canvas波浪墙，其中一款利用WebGL让3D效果渲染得淋漓尽致，不过也消耗CPU。今天我们要再分享一款基于HTML5 3D的点阵列波浪翻滚动画特效，同样是非常的壮观。2、HTML5小...
CSS样式添加方式对比
qq_44174803的博客
10-29 546
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档 文章目录前言一、CSS样式添加方式？1.行内添加（即在标签中添加）2.内嵌方式（head中添加）3.链接外部CSS文件（head中添加）二、使用效果展示1.行内添加+内嵌方式2.行内添加+外部链接总结 前言 众所周知，html是超文本标记语言，主要负责网页中的格式和内容，一般不主要负责网页中样式的设计；那么网页中样式的设计由谁来完成呢，则是CSS的主要工作。如此一来，变便能实现内容和样式分离的效果，两者不必紧密捆绑在一起，方面内容实现多样
CSS实现的数量对比图
dmr123456的博客
09-11 236
【代码】CSS实现的男女数量对比图，接壤处斜角展示。
CSS 曲线阴影实现的示例代码
12-29
本文介绍了CSS 曲线阴影实现的示例代码，分享给大家，具体如下： 通过对比可以看书“曲线阴影”比“普通阴影”的效果会更加生动。 原理：通过伪元素做出第二层阴影效果。 注意：伪元素的尺寸要比父元素小一点，...
Javascript+CSS实现影像卷帘效果思路及代码
10-25
在深入探讨如何用Javascript和CSS实现影像卷帘效果之前，先让我们了解一下卷帘效果本身。卷帘效果是一种视觉展示技术，通常在地理信息系统（GIS）中应用较多，比如Arcmap软件中就包含了这种效果。通过这个效果，用户...
jQuery实现的原图对比窗帘效果
10-25
jQuery实现原图对比窗帘效果主要利用了jQuery库和HTML、CSS技术来创建一个类似窗帘滑动的交互效果，这种效果可以用于比较前后两种不同的图像。实现这种效果的核心思路是在一个容器内同时展示两张图片，并使用一个可...
CSS实现PK条效果
cainiao1412的博客
08-03 1023
代码】CSS实现PK条效果。
html+css实现的PK进度条.根据双主的数据生成相应长度的红色蓝色条
01-24
html+css制作的PK进度条.zip
jquery css3动态数据对比代码.zip
07-04
jquery css3动态数据对比代码是一款类似进度条的仿QQPK对比插件下载。
css实现PK动效
叶小树咯
03-01 917
pk动效
CSS实现图片滑动对比
最新发布
想好了再写！
11-14 496
【代码】CSS实现图片滑动对比。
CSS图片对比效果
qq_44675204的博客
05-03 457
使用resize属性完成图片对比效果
HTML,CSS和JavaScript对比(一)
何新生(Daniel) 勇敢坚毅真正之才智乃刚毅之志向。 —— 拿破仑
01-26 2426
HTML,CSS和JavaScript对比(一) 目录 前言: 一,各自代码片段     1, HTML 编辑网页     2,CSS.      3,JavaScript. 二:各自的角色    1,HTML    2,CSS.      (1)什么是样式呢?      (2)CSS角色: 3,JavaScript.  三:总结   前言:
Bootstrap VS Semantic VS Foundation
热门推荐
Aric_Chen的专栏
04-20 1万+
相信多数科技公司都没有自己动手设计UI的能力！ 看到这个开头，估计很多程序猿很不服气，我们那个美工可NB了，各种切图，各种特效！ 如果你跟我讲这些，就说明你还没有明白UI具体指什么。通常我们所讲的UI包含如下几个方面 1. 页面的整体布局设计，例如左侧的菜单设计，顶部的用户信息区域 2. 通用的配色方案 3. 公用的组件，例如按钮，Tab，Dropdown
CSS3 VS CSS2大PK
weixin_34297704的博客
08-20 141
本文作者通过制作同样的页面对CSS2和CSS3进行了比较，我们来看一下谁更胜一筹。CSS3已经面世很久，目前仍处于开发完善阶段。不过网上关于CSS3的介绍、使用方法和夸奖已经传得沸沸扬扬了，建站学也有少关于CSS3的介绍。CSS3比CSS2到底是不是真的好？到底有什么优越之处呢？本文借鉴国外作者的文章（原文可以查看文章底部链接），从CSS3编写及作用原理以外的角度分析一下CSS3与CSS的差别。笔...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值