仿写一个咸鱼APP上的热门卡片样式

我在情感上的愚钝就像是门窗紧闭的屋子，虽然爱情的脚步在屋前走过去又走过来，我也听到了，可是我觉得那是路过的脚步，那是走向别人的脚步。直到有一天，这个脚步停留在这里

对象

一直有一个想法，就是用css写一个好用的不规则圆角梯形；明明一张图片就可以实现的东西咋一直纠结css呢？大致是因为css写的我不用当心图片模糊，或者内容太多拉伸，甚至深色浅色模式可以更好的控制，减少程序体积：仿写一个咸鱼APP上的热门卡片样式

最后还是一个前端鄙视链：css 》 svg 》png

最大的难度还是这个类似圆角梯形的白色容器

思考

这种圆角，在css中可以使用path() 函数来创建一个复杂的裁剪路径，那弧度可以直接用贝塞尔曲线，直接现成的一个，解决了99%的问题；

clip-path: path("M 50,0 C 25,0 25,50 0,50 L 50,50 Z");

剩下的1%是在不同屏幕中，这个图形大小不一；因为 SVG 路径中的坐标是相对于元素本身的尺寸，导致在不同尺寸的元素中，裁剪路径的形状比例保持一致，但视觉效果可能因元素大小而显得不同

实践

在回首其实之前有写过类似的效果《小程序如何写不规则选项卡，css内凹圆角》，但这效果就注定和渐变背景无缘想来想去，干脆最难的圆角不要了

<template>
	<view>
		<view class="fr-view">
			<view class="fr-content-view">
				<view class="fr-content-icon">
					<image class="fr-img" src="/static/logo.png" mode=""></image>
				</view>
				<view class="fr-content-right"></view>
				<view class="fr-content-bottom"></view>

			</view>
			<view class="fr-content">
				<view class="fr-title">
					Doc热门
				</view>
				<scroll-view scroll-y="true" class="fr-list">
					<view class="fr-list-item" v-for="(item, index) in 9" :key="index"><text class="fr-list-icon">{{index + 1 }}.</text> 不必让种种记忆永远和自己同在，就让它留在它所形成的地方吧</view>
				</scroll-view>
			</view>
		</view>
	</view>
</template>

<style>
	.fr-list-icon {
		font-size: 32rpx;
		color: #9AEF39;
		font-weight: bold;
		font-style: italic;
	}

	.fr-list-item {
		font-size: 26rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 1;
		-webkit-box-orient: vertical;
		margin-bottom: 10rpx;
	}

	.fr-content-bottom {
		height: 200rpx;
		background-color: #ffffff;
		margin-top: 100rpx;
		border-radius: 20rpx 0 20rpx 20rpx;
	}

	.fr-content-icon {
		position: absolute;
		left: 50rpx;
		top: 30rpx;
		height: 64rpx;
		width: 64rpx;
	}

	.fr-content-right {
		height: 100rpx;
		background-color: #ffffff;
		width: 70%;
		position: absolute;
		right: 0;
		top: 0;
		border-radius: 20rpx 20rpx 0 0;
	}

	.fr-content {
		position: absolute;
		top: 0;
		left: 0;
		display: flex;
		z-index: 9;
		width: 100%;
		height: 100%;
	}

	.fr-title {
		width: 30%;
		flex-shrink: 0;
		font-size: 40rpx;
		font-weight: bold;
		position: absolute;
		left: 38rpx;
		top: 40%;
	}

	.fr-list {
		width: 60%;
		margin-left: 35%;
		height: 250rpx;
	}

	.fr-content-right::before {
		content: '';
		position: absolute;
		top: 0;
		width: 28rpx;
		height: 100%;
		background: #ffffff;
		transform: skew(-17deg);
		left: -14rpx;
		border-radius: 20rpx 0 0 0;
	}

	.fr-view {
		background-color: #9AEF39;
		margin: 30rpx;
		border-radius: 20rpx;
		height: 300rpx;
		box-shadow: rgb(0 0 0 / 6%) 10rpx 10rpx 10rpx;
		position: relative;
	}

	.fr-content-view {
		position: absolute;
		top: -20rpx;
		height: 300rpx;
		width: calc(100% - 30rpx);
		left: 15rpx;
	}

	.fr-img {
		height: 100%;
		width: 100%;
	}

	page {
		background-color: #e1e1e1;
	}
</style>

最终

咱也也不是非css不可，png也不错