用css怎么实现不规则圆角

文字也随着倾斜了，可以自己再处理一下；
手机高亮时，按照这种写法重新调整一下样式；

<template>
  <div class="container">
    <nav>
      <div>手机</div>
      <div class="active">银行卡</div>
    </nav>
  </div>
</template>

<style lang="scss" scoped>
.container {
  width: 320px;
  aspect-ratio: 1/2;
  border-radius: 10px;
  background-color: white;
  box-shadow: 0 0 4px 4px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}
nav {
  display: flex;
  background: linear-gradient(145deg, #eee 50%, white 50%);
  height:  36px;
  div {
    width: 50%;
    height: 100%;
    line-height: 36px;
    text-align: center;
    // 左边的
    background: #eee;
    border-bottom-right-radius: 10px;
    transform: skewX(-18deg);
  }
  // 右边的
  .active {
    background-color: white;
    border-top-left-radius: 10px;
    transform: skewX(-18deg);
  }
}
</style>

引用 皆我百晓生 小程序回复内容作答：

要实现不规则圆角的卡片效果，可以使用CSS的border-radius属性配合clip-path属性。

首先，可以使用border-radius设置卡片的四个角的圆角大小，例如：

.card {
  border-radius: 20px;
}

然后，使用clip-path属性来创建不规则形状。可以使用CSS的polygon()函数，其中可以定义多个点来创建自定义形状。例如，下面的代码将创建一个左上角和右下角为圆角，而右上角和左下角为尖角的卡片：

.card {
  border-radius: 20px;
  clip-path: polygon(0% 20%, 20% 0%, 100% 0%, 100% 80%, 80% 100%, 0% 100%);
}

通过调整polygon()函数中的点的位置，你可以自定义不规则形状。这样，你就可以创建自己想要的卡片效果。

希望能帮到你！如果还有其他问题，请随时提问。

【以下回答由 GPT 生成】

要实现不规则圆角效果的卡片，可以使用CSS的border-radius属性和伪元素来实现。以下是一种可能的解决方案：

1. 首先，将卡片容器的背景颜色设置为希望的颜色，并设置position: relative属性，以便后面添加伪元素。

.md_img_container {
  background-color: #ececec;
  position: relative;
}

1. 添加卡片的阴影效果，可以使用box-shadow属性。根据需要调整阴影的参数。

.md_img_container {
  /* 其他样式 */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

1. 添加圆角效果，可以使用border-radius属性。但是由于需要实现不规则的圆角效果，可以使用伪元素来实现。首先，为卡片容器添加一个伪元素::after，并将其设为正方形。

.md_img_container::after {
  content: "";
  display: block;
  padding-top: 100%;
}

1. 然后，设置伪元素的border-radius属性为50%，这样伪元素就变为圆形。同时，设置伪元素的宽度、高度和位置，达到不规则的圆角效果。根据需要调整具体数值。

.md_img_container::after {
  /* 其他样式 */
  border-radius: 50%;
  width: 200%;
  height: 100%;
  position: absolute;
  top: -50%;
  left: -50%;
  transform: rotate(-45deg);
}

1. 最后，将图片设置为浮动并添加适当的间距。

.md_img {
  float: left;
  margin-right: 10px;
}

通过以上步骤，就可以实现不规则圆角效果的卡片。

完整的代码示例：

<p></p>
<p class="md_img_container"><img class="md_img" src="" alt="img" align="left" /></p>
<br />
<p></p>

.md_img_container {
  background-color: #ececec;
  position: relative;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.md_img_container::after {
  content: "";
  display: block;
  padding-top: 100%;
  border-radius: 50%;
  width: 200%;
  height: 100%;
  position: absolute;
  top: -50%;
  left: -50%;
  transform: rotate(-45deg);
}

.md_img {
  float: left;
  margin-right: 10px;
}

请注意，以上代码是一种可能的解决方案。由于没有提供更具体的要求和示例，可能还需要根据实际情况进行适当的调整和优化。

【相关推荐】

• 帮你找了个相似的问题, 你可以看下: https://ask.csdn.net/questions/7634364
• 我还给你找了一篇非常好的博客，你可以看看是否有帮助，链接：前端面试宝典 每日一题（12）一些常用css效果分享
• 您还可以看一下 邱石老师的小程序开发入门课程中的 14-4学习css中文本的常用样式小节, 巩固相关知识点
  
• 除此之外, 这篇博客: CSS属性继承中的 并不是所有的CSS属性都是可以继承的，或者说是自动继承 部分也许能够解决你的问题。