css 下方带圆形的渐变矩形

Question

我正在尝试实现以下设计，但无法使圆形和矩形渐变相匹配。我查了一下，找不到任何有用的东西...

当您测试不同的屏幕比例时，这一点更加明显，随着您调整 window 的大小，差异将 increase/decrease。

Sample design with mismatching gradients

这是当前实现的一个插件

https://next.plnkr.co/edit/D6v7qmzze43dC6ch

如何 get/compute 圆的渐变使其与矩形的渐变完美匹配？

这个问题还有其他方法吗？

感谢您的宝贵时间！

Answer 1

你可以试试这个。

<html>
  <head>
    <title>Something</title>
  </head>

  <style>
    body {
      margin: 0;
    }

    .mainDiv {
      margin: auto;
      width: 100%;
    }

    .header {
      background: #2ac2a8;
      background: linear-gradient(0deg,#2ac2a8 0%, #8fe2d2 80%);
      background: -webkit-linear-gradient(0deg,#2ac2a8 0%, #8fe2d2 80%);
      background: -moz-linear-gradient(0deg,#2ac2a8 0%, #8fe2d2 80%);
      width: 100%;
      height: 300px;
      position: absolute;
    }

    .circlePhoto {
      width: 200px;
      height: 200px;
      background: #CCCCCC;
      border: 25px solid #37c8b0;
      border-radius: 50%;
      margin: auto;
      position: relative;
      top: 100px;
    }
  </style>

  <body>
    <div class="mainDiv">
      <div class="header">
        <div class="circlePhoto"></div>
      </div>
      <div class="content"></div>
    </div>
  </body>
</html>

Answer 2

而不是“45 度”

.toolbar-header {
    background: linear-gradient(45deg, #00b598, #b3eade);
 }

.picture {
  background-image: linear-gradient(45deg, #4dc4ac, #6ddac8);
 }

改为"to right"

.toolbar-header {
    background: linear-gradient(to right, #00b598, #b3eade);
 }

.picture {
    background-image: linear-gradient(to right, #4dc4ac, #6ddac8);
 }

或"to top right"

Answer 3

好的，我是这样工作的，它使用剪裁但看起来很棒，无论如何谢谢

/* from flex-layout (fxLayout="row" fxlayoutalign="center stretch") */
.flex-layout {
  display: flex;
  place-content: stretch stretch;
  align-items: stretch;
  flex-direction: column;
  box-sizing: border-box;
  max-height: 100%;
}

.toolbar-header {
  background: linear-gradient(to top right, #00b598, #b3eade);
  height: 200px; /* picture size including border */
  width: 100%;
  position: absolute;
}

.rectangle-mask {
  clip-path: inset(0px 0px 30px 0px);
}

.circle-mask {
  height: 200px;
  text-align: center;
  clip-path: circle(100px at center);
}

.picture {
  margin-top: 15px;
  height: 170px;
  width: 170px;
  clip-path: circle(85px at center);
}

<!doctype html>

<html>

<head>
 <link rel="stylesheet" href="lib/style.css">
 <script src="lib/script.js">

 </script>
</head>

<body>
 <div class="flex-layout" role="heading">
  <div class="toolbar-header rectangle-mask"></div>
  <div class="toolbar-header circle-mask">
   <img class="picture" src="data:image/png;base64,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" alt="Header picture"/>
  </div>
</div>

  </body>
</html>

css 下方带圆形的渐变矩形

css gradient rectangle with round beneath

css

gradient