如何从右上角到左下角获得渐变色

Question

我试图获得css渐变，就像下面的bootstrap图标一样。

我只想要这个代码中的两个解决方案。

  

1.）如何制作渐变色（如图标中所示）（从右上角到左下角）？

     

2.）div内文本的垂直对齐（不使用flex属性的可能性）

提前致谢:)

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

1. 使用to top right关键字指示渐变从左下角移动到右上角 background: linear-gradient(to top right, #2F2727, #1a82f7);
2. 使用line-height等于height。

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

＆＃13;
＆＃13;
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;
}
＆＃13;
<div>
 <p>
   b
 </p>
</div>
＆＃13;
＆＃13;
＆＃13;

Answer 2

试试这个：

div {
    background: -webkit-linear-gradient(45deg, #2F2727, #1a82f7);
}

Answer 3

您应该使用径向渐变定位 - top right，例如：

background: linear-gradient(
            to top right, 
            #0F0437, #612D50
);

请看下面的代码段：

.box {
  display: inline-block;
  padding: 50px 70px;
  font-size: 100px;
  border-radius: 20px;
  color: white;
  background: linear-gradient(
      to top right, 
      #0F0437, #612D50
    );
}

<div class="box">B</div>

希望这有帮助！

Answer 4

将to top right用于对角线（或45deg}），将line-height等效于height值，以使字母垂直居中。

这是从您的图像中采样的颜色：

div {
  background: linear-gradient(to top right, #080135 0%, #612d50 100%);
  width: 100px;
  height: 100px;
  border-radius: 4px;
  color: white;
  font-family: sans-serif;
  text-align: center;
  font-weight: bold;
  font-size: 60px;
  line-height: 100px;
}

<div>B</div>