时间戳

首页 > 解决方案 > 如何沿边界半径剪辑内容？

html - 如何沿边界半径剪辑内容？

问题描述

我正在构建一个具有特殊设计的聊天机器人，其中包括顶部的旋转 div。我想在边框周围剪裁我的标题分区。

在此示例中，我无法border-radius: 29px;在班级的左上角和右上角维护我的聊天小部件header-part。

请在这个问题上指导我。谢谢。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8" />
  <title>Chatbot</title>

  <style>
    .chatbot-main {
      width: 431px;
      height: 719px;
      border-radius: 29px;
      background-color: #f2f4f9;
      margin: 20px
    }
    
    .header-part {
      padding: 20px;
      height: 125px;
      background-color: #21f5a8;
      border-top-left-radius: 29px;
      border-top-right-radius: 29px;
      border-bottom-left-radius: 26px;
      border-bottom-right-radius: 26px;
      clip-path: inset(0px 0px 0px 0px);
    }
    
    .company-header {
      background-color: #0caa63;
      display: block;
      width: 453.3px;
      height: 170px;
      position: absolute;
      left: 4px;
      top: -85.38px;
      transform: rotate(-2.86deg);
    }
    
    .support-header {
      position: absolute;
      top: 130px;
    }
  </style>
</head>

<body>
  <div class="chatbot-main">
    <div class="header-part">
      <div class="company-header">Chatbot</div>
      <div class="support-header">
        you are talking to support assistant
      </div>
    </div>
  </div>

</body>

</html>

标签： htmlcssuser-interfacefrontend

解决方案

你只需要添加

overflow: hidden;
position: relative;

给你的.header-part

例子：

.chatbot-main {
  width: 431px;
  height: 719px;
  border-radius: 29px;
  background-color: #f2f4f9;
  margin: 20px
}

.header-part {
  padding: 20px;
  height: 125px;
  background-color: #21f5a8;
  border-top-left-radius: 29px;
  border-top-right-radius: 29px;
  border-bottom-left-radius: 26px;
  border-bottom-right-radius: 26px;
  clip-path: inset(0px 0px 0px 0px);
  overflow: hidden;
  position: relative;
}

.company-header {
  background-color: #0caa63;
  display: block;
  width: 453.3px;
  height: 170px;
  position: absolute;
  left: 4px;
  top: -85.38px;
  transform: rotate(-2.86deg);
}

.support-header {
  position: absolute;
  top: 130px;
}
<div class="chatbot-main">
  <div class="header-part">
    <div class="company-header">Chatbot</div>
    <div class="support-header">
      you are talking to support assistant
    </div>
  </div>
</div>

推荐阅读