如何使CSS3中的背景图案的三角形? [英] How to Make a Triangle with Background Pattern in CSS3?
本文介绍了如何使CSS3中的背景图案的三角形?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我尝试使用CSS进行以下操作
I am trying to make the following with CSS
用CSS制作三角形很简单,但我不知道如何给它一个非实体的背景。
Making a triangle with CSS is straightforward but I don't know how to give it a non-solid background.
有任何建议吗?
编辑:背景图案是PNG图片。
edit: The background pattern is a PNG image.
推荐答案
.triangle {
width: 160px;
height: 160px;
position: absolute;
top: 30%;
left: 45%;
clip: rect(auto, 180px, auto, 100px);
transform: rotate(-90deg);
}
.triangle::after {
content: "";
position: absolute;
top: 10px;
bottom: 10px;
left: 10px;
right: 10px;
background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,rgba(206,219,233,1)), color-stop(17%,rgba(170,197,222,1)), color-stop(50%,rgba(97,153,199,1)), color-stop(51%,rgba(58,132,195,1)), color-stop(59%,rgba(65,154,214,1)), color-stop(71%,rgba(75,184,240,1)), color-stop(84%,rgba(58,139,194,1)), color-stop(100%,rgba(38,85,139,1)));
transform: rotate(-45deg);
}
如果要使用 png c> 图像,则应将此属性更改为:
If you want to use png
image for your background
then you should change this property to :
background:url('my_url_to_the_image');
这篇关于如何使CSS3中的背景图案的三角形?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文