html - 如何获取从右上角到左下角的渐变色

Question

我正在尝试获取 css 渐变，如下面的 Bootstrap 图标所示。

我只想从这段代码中得到两个解决方案。

1.)How to make gradient color as like in icon(From top right to bottom left)?

2.)Vertical alignment of text within div(Possibility without using flex property)

提前致谢:)

div{
  width:100px;
  height:100px;
  background: -webkit-linear-gradient(left, #2F2727, #1a82f7);
  border-radius:4px;
}
div p{
  color:white;
  text-align:center;
  text-transform:uppercase;
  font-weight:bold;
  font-size:42px;
}

<div>
 <p>
   b
 </p>
</div>

Answer 1

1. 使用 to top right 关键字来引导渐变从左下角移动到右上角。
   背景:线性渐变(到右上角，#2F2727，#1a82f7)；
2. 使用 line-height 等于 height。

有关 css 渐变的更多信息是 here .

div{
  width:100px;
  height:100px;
  background: linear-gradient(to top right, #2F2727, #1a82f7);
  border-radius:4px;
}
div p{
  color:white;
  text-align:center;
  text-transform:uppercase;
  font-weight:bold;
  font-size:42px;
  line-height: 100px;
}

<div>
 <p>
   b
 </p>
</div>