html 带超椭圆角的矩形CSS

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

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

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

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

dy1byipe

dy1byipe1#

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

  1. .superellipse {
  2. display: inline-block;
  3. margin: 20px;
  4. width: 150px;
  5. height: 150px;
  6. background: linear-gradient(to bottom right, deeppink, orangered);
  7. 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');
  8. }
  9. .content {
  10. display: flex;
  11. flex-direction: column;
  12. justify-content: center;
  13. align-items: center;
  14. padding: 10px;
  15. color: white;
  16. height: 100%;
  17. }
  18. input {
  19. background: transparent;
  20. border: none;
  21. padding: 5px;
  22. width: 100%;
  23. color: white;
  24. font-size: 16px; /* Set your desired font size */
  25. }
  26. .inputfir::placeholder {
  27. font-size: 22px;
  28. font-weight: bold;
  29. color: black;
  30. }
  31. .inputfd::placeholder {
  32. color: black;
  33. }
  34. /* Style the input when focused (clicked) */
  35. input:focus {
  36. outline: none; /* Remove the default focus outline */
  37. border: none; /* Remove border when focused */
  38. box-shadow: none; /* Remove any box shadow when focused */
  39. }
  1. <div class="superellipse">
  2. <div class="content">
  3. <input type="text" placeholder="Title" autocomplete="off" class="inputfir">
  4. <input type="text" placeholder="Description" autocomplete="off" class="inputfd">
  5. </div>
  6. </div>
展开查看全部

相关问题