0

このようなグラデーションを別の div (白いフェード水平線) の上に作成できる手法に興味があります。これは私が望むものです： ここに画像の説明を入力

そして、これは私が現時点で持っているものです（ええ、私は知っています）：

ここに画像の説明を入力

水平線はシンプル

color css プロパティを使用すると、Gradient は次のようになります。

  pointer-events: none;
  height: 457px;
  position: absolute;
  right: 0;
  top: -80px;
  width: 100%;
  background: radial-gradient(circle at center, rgba(255,255,255,0.15) 0%,rgba(255,255,255,0) 20%);

画像は絶対配置の単純な (rails image_tag) です。

4

1 に答える 1

1

ここにヒントがあります。CSS を使用して複数の三角形の形状を作成でき、ロゴに合わせて形状を配置して回転させるだけです。

たとえば、以下は 1 つの形状の例です。それを参照して複製し、思い通りに作ることができます。どうぞ。

HTML:

<div class="shape"></div>

CSS:

 .shape{ 
height: 100px; 
width: 100px;
position:relative;
background: rgb(xxx,xxx,xxx);
background: -moz-linear-gradient(top,  rgba(xxx,xxx,xxx,xxx) xxx%, rgba(xxx,xxx,xxx,xxx) xxx%); 
background: -webkit-gradient(linear, left top, left bottom, color-stop(xxx%,rgba(xxx,xxx,xxx,x)), color-stop(xxx%,rgba(xxx,xxx,xxx,x)));
-webkit-linear-gradient(top,  rgba(xxx,xxx,xxx,x) xxx%,rgba(xxx,xxx,xxx,x) xxx%); 
-o-linear-gradient(top,  rgba(xxx,xxx,xxx,x) xx%,rgba(xxx,xxx,xxx,x) xxx%);
-ms-linear-gradient(top,  rgba(xxx,xxx,xxx,x) 0%,rgba(xxx,xxx,xxx,x) xxx%); 
linear-gradient(top,  rgba(xxx,xxx,xxx,x) 0%,rgba(xxx,xxx,xxx,x) xxx%); 
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#xxx', endColorstr='#xxx',GradientType=0 ); 
}

.shape:after {
    -moz-transform: rotate(xxdeg);
    -ms-transform:rotate(xxdeg); 
    -webkit-transform:rotate(xxdeg);
    -o-transform:rotate(xxdeg); 
    background: none repeat 0 0 xxx;
    content: "";
    height: xxx;
    left: xxx;
    position: absolute;
    top: xxx;
    width: xxx;

}

"xx" または "x" または "xxx" はダミーの値で、自分の値に置き換えることができます。

お役に立てれば。

于 2013-05-24T11:52:51.343 に答える