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

我试图得到

css

渐变，就像下面的引导图标一样

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

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

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

提前感谢：）

div{
宽度：100px；
高度：100px；
背景：-webkit线性梯度（左，#2F2727，#1a82f7）；
边界半径：4px；
}
p组{
颜色：白色；
文本对齐：居中；
文本转换：大写；
字体大小：粗体；
字体大小：42px；
}

B

试试这个：

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

使用

到右上角

关键字引导渐变从左下角移动到右上角。

background：线性渐变（右上角，#2F2727，#1a82f7）

使用

行高

等于

高度

有关css渐变的更多信息，请参阅

div{
宽度：100px；
高度：100px；
背景：线性渐变（右上角，#2F2727，#1a82f7）；
边界半径：4px；
}
p组{
颜色：白色；
文本对齐：居中；
文本转换：大写；
字体大小：粗体；
字体大小：42px；
线高：100px；
}

B

使用右上角的

作为对角线角度（或者
45度
），并使用与
高度
值相等的
行高度
值使字母垂直居中

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


div{
背景：线性梯度（右上角，#080135 0%，#612d50 100%）；
宽度：100px；
高度：100px；
边界半径：4px；
颜色：白色；
字体系列：无衬线；
文本对齐：居中；
字体大小：粗体；
字体大小：60px；
线高：100px；
}
B
为此，您应该使用径向梯度定位-
右上角
，例如：

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

请看下面的代码片段：


.box{
显示：内联块；
填充：50px 70px；
字体大小：100px；
边界半径：20px；
颜色：白色；
背景：线性梯度(
右上角，
#0F0437#612D50
);
}
B
工作正常。我会更改颜色代码。谢谢你，乌斯曼。