3

これは私が達成しようとしているものです:

望ましい勾配

水色の線は単なる目印です。中心から固定ピクセル(左にオフ) からの角度が必要です。また、左側の濃い青もグラデーションにしたいと思います。

私は必要な角度を作ることができますが、中心から固定された点に配置し、暗い部分を別の角度のグラデーションにすることに固執しています:

.topbar {
  height: 150px;
  background: rgb(28,25,84);
  background: linear-gradient(-63deg, rgba(28,25,84,1) 50%, rgba(20,18,63,1) 0);
}
<div class="topbar"></div>

ありがとう！

4

1 に答える 1

4

次のような複数の背景を持つことができます。

中心からの固定距離を、中心から200px半分ずらした 1 つのグラデーションの幅にしまし200pxた。

.topbar {
  height: 150px;
  background: 
    
    /* the markers*/
    linear-gradient(yellow 0 0) 25% /2px 100%,
    linear-gradient(yellow 0 0) 50% /2px 100%,
    linear-gradient(yellow 0 0) 75% /2px 100%,
    /* the needed background*/
    linear-gradient(-63deg, rgba(28,25,84,1) 50%,transparent 0) calc(50% - 100px) 0/200px 100%,
    linear-gradient(rgba(28,25,84,1),rgba(28,25,84,1)) right/50% 100%,
    linear-gradient(to bottom, red,blue);
  background-repeat:no-repeat;
}
<div class="topbar"></div>

パーセンテージ値の操作方法の詳細については、この回答を確認できbackground-positionます: Using percentage values with background-position on a linear-gradient

于 2018-11-20T21:14:37.553 に答える