android 三角形背景图,CSS3 三角形渐变背景图

水深无声 2022-10-17 11:16 169阅读 0赞

CSS

语言：

CSSSCSS

确定

.background \{

height: 400px;

width: 650px;

background: linear-gradient(\#891542, \#b61252, \#891542);

position: relative;

margin: 0 auto;

overflow: hidden;

\}

.triangle \{

width: 75px;

height: 75px;

transform: rotate(135deg);

\-webkit-transform: rotate(135deg);

position: absolute;

top: 10px;

left: 100px;

background-image: linear-gradient(to bottom left, \#891542 50%, rgba(255, 255, 255, 0.0) 50%);

\}

.triangle2 \{

width: 300px;

height: 300px;

transform: rotate(-45deg);

\-webkit-transform: rotate(-45deg);

position: absolute;

top: 50px;

left: 183px;

background-image: linear-gradient(to bottom left, \#b61252 50%, rgba(255, 255, 255, 0.0) 50%);

\}

.triangle3 \{

width: 75px;

height: 75px;

transform: rotate(-45deg);

\-webkit-transform: rotate(-45deg);

position: absolute;

top: 310px;

left: 100px;

background-image: linear-gradient(to bottom left, rgba(137, 21, 67, 0.2) 50%, rgba(255, 255, 255, 0.0) 50%);

\}

.date \{

padding-top: 25px;

font-family: 'Open Sans 400', sans-serif;

font-style: 400;

font-size: 13px;

text-align: center;

color: \#bcbcbc;

\}

发表评论取消回复

表情：

评论列表（有 0 条评论，169人围观）

还没有评论，来说两句吧...

相关阅读

相关 css背景渐变(灰色渐变背景)

css中文字的渐变怎么？css中文字的渐变怎么办洪资实业样式如下： .text-gradient \{ display: inline-block; colo

Dear 丶/ 2023年09月26日 13:13/ 0 赞/ 98 阅读

相关 css3背景色渐变属性_背景色（CSS属性）

css3背景色渐变属性描述 (Description) This property sets the `background-color` of an element

柔光的暖阳◎/ 2022年12月03日 01:56/ 0 赞/ 233 阅读

相关 android 三角形背景图,CSS3 三角形渐变背景图

CSS 语言： CSSSCSS 确定 .background \{ height: 400px; width: 650px; background: linear

水深无声/ 2022年10月17日 11:16/ 0 赞/ 170 阅读

相关 249.两个三角形背景

效果 (源码网盘地址在最后) ![5b2ae50da128fb8438cb72feb09b24ce.gif][] 源码 index.html <!DOC

浅浅的花香味﹌/ 2022年08月28日 07:58/ 0 赞/ 95 阅读

相关 css背景图设置

.bgImg1\{width: 200px; height: 500px; border: 1px solid \999; background-image: ur

Bertha 。/ 2022年06月05日 00:54/ 0 赞/ 199 阅读

相关 css3渐变背景色

> 好久没写关于css的博客了，因为一个app的需要，自己要做一个动态的渐变背景块，所以算是重新学习了渐变类的css。首先说一下这个背景：vue项目中，考虑到兼容性，

傷城~/ 2022年01月23日 12:51/ 0 赞/ 333 阅读

相关 css背景图自适应

在开发时，修改了d2admin的登录页面。使用了背景图片，但是ui给的图过于大（可能是我电脑屏幕小哈）无法完整的显示到页面上，所以修改了代码，可以完整显示背景图。代码如下：

迈不过友情╰/ 2022年01月06日 14:09/ 0 赞/ 313 阅读

相关 CSS3背景，渐变

1，有利于代码维护，有利于使用debug进行调试打断点。 2，后面三个都存在计算，所以分开写最好。背景复合属性最好的写法， background:\abcdef

﹏ヽ暗。殇╰゛Y/ 2021年12月20日 01:04/ 0 赞/ 358 阅读

相关 CSS 背景颜色渐变

<style type="text/css"> html,body \{ margin:0px; width

水深无声/ 2021年11月29日 09:32/ 0 赞/ 405 阅读

相关 css3颜色渐变：css3如何实现背景颜色渐变？

为了开发网页的美观，css3背景颜色渐变是经常会用到的，那么，css3背景颜色渐变如何设置呢？本篇文章我们就来介绍关于css颜色渐变背景的设置方法。我们要知道的是cs...

朱雀/ 2021年01月29日 18:59/ 0 赞/ 861 阅读