Question

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

当您测试不同的屏幕比例时，这一点更加明显，当您调整窗口大小时，差异会增加/减小。

Sample design with mismatching gradients

这是当前实施的一大突破

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

如何获取/计算圆的渐变以使其完全匹配矩形的渐变？

是否有另一种方法可以解决此问题？

谢谢您的时间！

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);
 }

改为“向右”

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

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

或“右上角”

Answer 3

好吧，我像这样工作了，它使用裁剪，但是看起来不错，谢谢。

 this.products$ = this.route.paramMap.pipe(
      tap((params:ParamMap) => this.brandName = params.get('brand')),
      switchMap((params:ParamMap) => 
         this.dataService.getProductsByBrand(params.get('brand')))      
    )

/* 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);
}

css渐变矩形，下面带有圆形

3 个答案: