css矩形样式，两边圆形

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

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。

原文地址：https://blog.csdn.net/qq_37379610/article/details/144367080

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！