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>