如何用CSS绘制多边形背景? [英] How to draw polygon background with CSS?
本文介绍了如何用CSS绘制多边形背景?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我的页面充满了内容.
有一个我想设置为整个页面背景的多边形,颜色为#E0E6E5.
There is a polygon which I want to set as a background for the whole page with color #E0E6E5.
polygon(0 0, 100% 35%, 100% 65%, 0% 100%)
我该怎么做?
我知道这听起来很简单. 但是我无法使用clip-path来实现,它基本上切断了页面的另一半并使它不可见. 不能使用静态图片.
I know that it sounds very simple. But I was unable to do it with clip-path which basically cuts off the other half of the page and makes is non-visible. A static image is not an option.
我还有其他选择吗?
推荐答案
您想要的形状是这样:
.box {
-webkit-clip-path:polygon(0 0, 100% 35%, 100% 65%, 0% 100%);
clip-path:polygon(0 0, 100% 35%, 100% 65%, 0% 100%);
width:200px;
height:200px;
background:#E0E6E5;
}
<div class="box"></div>
您可以轻松地通过渐变和多个背景来做到这一点:
You can easily do it with gradient and multiple background:
.box {
width:200px;
height:200px;
background:
linear-gradient(to bottom left,transparent 49.8%,#E0E6E5 50%) top /100% 35%,
linear-gradient(to top left,transparent 49.8%,#E0E6E5 50%) bottom/100% 35%,
linear-gradient(#E0E6E5,#E0E6E5) center/100% 30%;
background-repeat:no-repeat;
}
<div class="box"></div>
这篇关于如何用CSS绘制多边形背景?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文