【问题标题】:How do I re-create this shape in html & css? [duplicate]如何在 html 和 css 中重新创建这个形状? [复制]
【发布时间】:2021-11-11 04:49:28
【问题描述】:

我想创建以下形状:

我目前有以下:

HTML:

<div className={`${categoriesStyles.categoryCardHead} 
     ${categoriesStyles.categoryCardPink} flex content-center rounded-2xl`}>
   <div className{`${categoriesStyles.categoryCardHeadingContainer} 
       ${categoriesStyles.categoryCardHeadingPink} z-50 flex flex-wrap content-center 
       rounded-2xl`}>
   </div>
</div>

CSS:

.categoryCardHead {
  position: relative;
  height: 191px;
  z-index: 10;
}

.categoryCardHeadingContainer {
  cursor: pointer;
  border-top-right-radius: 35%;
  width: 70%;
  border-bottom-right-radius: 35%;
}

如何获得带有轻微阴影的正确曲线?

【问题讨论】:

    标签: html css


    【解决方案1】:

    在这里,我创建了一个透明的背景圆和具有绝对位置的内部彩色 div,因此内部 div 被外圆裁剪(溢出:隐藏)。 您可以随时调整尺寸以获得不同的形状。

    投影filter function creates a shadow that conforms to the shape (alpha channel) of the image itself

    .outer {
      width: 10rem;
      height: 10rem;
      background: transparent;
      border-radius: 50%;
      position: relative;
      overflow: hidden;
      filter: drop-shadow(2px 0 2px #444);
    }
    
    .inner {
      width: 5rem;
      height: 5rem;
      background: #b63689;
      position: absolute;
      top: 50%;
      right:0;
      transform: translateY(-50%);
      border-radius: 5px;
    }
    <div class="outer">
    <div class="inner">
    </div>
    </div>

    【讨论】:

    • 仅代码的答案被认为是低质量的。没有充分的解释,你的答案很难理解。如果 OP 无法理解您的答案,那么他也将无法重现您可能的解决方案。因此,这对他/她来说毫无价值。请添加对您可能的解决方案的充分解释。
    • 工作愉快。谢谢马杜里。
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2021-09-19
    • 2012-01-30
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2021-01-09
    • 1970-01-01
    相关资源
    最近更新 更多