css矩形样式,两边圆形

news/2024/12/15 3:46:57/

在这里插入图片描述

废话不多说,代码如下,直接拷贝即可使用:

index.vue文件

<template><view class="wrap"><view class="tabs"><view class="tab active"><view class="name">标签</view></view></view><view class="content-wrap"><image mode="aspectFill" src="../../static/password.png"></image></view></view>
</template>
<script>export default {data() {return {};},methods: {}};
</script><style lang="scss">.wrap {background-color: #aaaa7f;width: 300px;margin: 0 auto;padding: 10px;box-sizing: border-box;}.tabs {display: flex;width: 100%;overflow: hidden;border-radius: 8px 8px 0 0;background-color: #fff;.box {width: 200px;height: 50px;}}.tab {width: 100px;height: 50px;margin: 0 auto;cursor: pointer;position: relative;text-align: center;line-height: 50px;transform: rotate(180deg);.name {transform: rotate(-180deg);}}.tab.active {color: #fff;font-size: 18px;letter-spacing: 2px;font-weight: bold;background-color: #ff55ff;}.tab.active:before {content: '';position: absolute;top: 0;left: -50px;height: 100%;width: 50px;z-index: 2;background-color: #ff55ff;clip-path: path('M 50,0 C 25,0 25,50 0,50 L 50,50 Z');}.tab.active:after {content: '';position: absolute;top: 0;right: -50px;height: 100%;width: 50px;z-index: 2;background-color: #ff55ff;box-sizing: border-box;clip-path: path('M 0,0 C 25,0 25,50 50,50 L 0, 50 Z');}.content-wrap {display: flex;justify-content: center;align-items: center;height: 200px;background-color: #fff;border-radius: 0 0 8px 8px;image{width: 100px;height: 100px;}}
</style>

素材如下

在这里插入图片描述

需要上百款登录注册界面模板的朋友可以点击查看:https://ext.dcloud.net.cn/plugin?id=8937。


http://www.ppmy.cn/news/1555197.html

相关文章

C语言程序设计P5-5【应用函数进行程序设计 | 第五节】—知识要点:变量的作用域和生存期

知识要点&#xff1a;变量的作用域和生存期 视频&#xff1a; 目录 一、任务分析 二、必备知识与理论 三、任务实施 一、任务分析 有一个一维数组&#xff0c;内放 10 个学生成绩&#xff0c;写一个函数&#xff0c;求出平均分、最高分和最低分。 任务要求用一个函数来完…

MacOs 日常故障排除troubleshooting

1. 关闭开机自启动 app X macOs 15.1 System settings -> General -> Login Items & Extensions->Open at Login -> Select app X and click -

OpenCV DCT图像去噪

文章目录 一、简介二、实现代码三、实现效果参考文献一、简介 DCT(离散余弦变换)图像去噪是一种基于频域变换的去噪方法,其主要思想是通过将图像从空间域转换到频域,对频域中的高频成分(通常与噪声相关)进行滤波,从而实现去噪。 DCT图像去噪的基本步骤: 1.将图像转换到…

如何使用aws的bedrock训练适合自己的模型

使用 Amazon Bedrock 训练适合自己的模型是一个涉及多个步骤的过程&#xff0c;包括数据准备、模型选择、训练和部署。以下是九河云总结的详细的步骤指南&#xff0c;帮助您在 AWS Bedrock 上训练和部署自定义模型。 ### 1. **准备工作** 在开始训练模型之前&#xff0c;您需…

React和Vue中暴露子组件的属性和方法给父组件用,并且控制子组件暴露的颗粒度的做法

React 在 React 中&#xff0c;forwardRef 是一种高级技术&#xff0c;它允许你将 ref 从父组件传递到子组件&#xff0c;从而直接访问子组件的 DOM 节点或公开的方法。这对于需要操作子组件内部状态或 DOM 的场景非常有用。为了使子组件能够暴露其属性和方法给父组件&#xf…

open cv学习之图片矫正

一&#xff0c;实验原理 图像矫正的原理是透视变换 图像畸变主要有两类&#xff1a;径向畸变和切向畸变。径向畸变通常会导致图像的四个角向外或向内弯曲&#xff1b;切向畸变则是由于相机与图像平面不完全平行引起的。而OpenCV 提供了一个相机标定的工具&#xff0c;能够自动…

IDEA方法注释模板设置

目录 创建模板 新建模板&#xff1a;命名为* 设置模板内容-IDEA格式模板 设置模板应用场景 设置参数 创建模板 /**Enter这里我们也按照这种习惯来设置IDEA的方法注释&#xff1a;File-->Settings-->Editor-->Live Templates 先新建模板组&#xff0c;然后在模板组中…

深度学习:基于MindSpore的极简风大模型微调

什么是PEFT&#xff1f;What is PEFT&#xff1f; PEFT(Parameter Efficient Fine-Tuning)是一系列让大规模预训练模型高效适应于新任务或新数据集的技术。 PEFT在保持大部分模型权重冻结&#xff0c;只修改或添加一小部份参数。这种方法极大得减少了计算量和存储开销&#x…