html 带超椭圆角的矩形CSS

y4ekin9u  于 2023-10-14  发布在  其他
关注(0)|答案(1)|浏览(137)

我需要一个超圆角矩形,不同的高度内的文字。
我发现this way可以创建柔和的角落,但我不知道如何让它不方形,并将内容放在里面。

if (CSS && 'paintWorklet' in CSS) CSS.paintWorklet.addModule('https://unpkg.com/smooth-corners')
.superellipse {
  display: inline-block;
  margin: 20px;
  height: 150px;
  width: 150px;
  mask-image: paint(smooth-corners);
  -webkit-mask-image: paint(smooth-corners);
  background: linear-gradient(to bottom right, deeppink, orangered);
}
<div class="superellipse" style="--smooth-corners: 4"></div>

但是当你试图拉伸它的时候,

dy1byipe

dy1byipe1#

您可以使用以下CSS方法实现所需的输出:

.superellipse {
            display: inline-block;
            margin: 20px;
            width: 150px;
            height: 150px;
            background: linear-gradient(to bottom right, deeppink, orangered);
            clip-path: path('M20 0 Q0 0 0 20 V130 Q0 150 20 150 H130 Q150 150 150 130 V20 Q150 0 130 0 H20 Z');
        }

        .content {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            padding: 10px;
            color: white;
            height: 100%;
        }

        input {
            background: transparent;
            border: none;
            padding: 5px;
            width: 100%;
            color: white;
            font-size: 16px; /* Set your desired font size */
        }

        .inputfir::placeholder {
            font-size: 22px;
            font-weight: bold;
            color: black;
        }

        .inputfd::placeholder {
            color: black;
        }

        /* Style the input when focused (clicked) */
        input:focus {
            outline: none; /* Remove the default focus outline */
            border: none; /* Remove border when focused */
            box-shadow: none; /* Remove any box shadow when focused */
        }
<div class="superellipse">
        <div class="content">
            <input type="text" placeholder="Title" autocomplete="off" class="inputfir">
            <input type="text" placeholder="Description" autocomplete="off" class="inputfd">
        </div>
    </div>

相关问题