是否可以使用css创建这样的背景？(is it possible to create a background like this using css? [duplicate])

是否可以使用css创建这样的背景？(is it possible to create a background like this using css? [duplicate])

这个问题在这里已有答案：

形状有倾斜的一面（响应） 2个答案

我有一个要求在网页上设置这个背景，我正在使用这个图像来做到这一点，但我相信应该有一种方法来使用CSS，我知道你可以使用css绘制对角线但不知道如何着使用css的其余部分。

提前致谢！

This question already has an answer here:

Shape with a slanted side (respive) answers

I have a requirement to set this background on a web page and I'm using this image to do that, but I believe there should a way to do this using CSS, I know you can draw diagonals using css but not sure how to color the rest of the box using css.

Thanks in advance!

最满意答案

是的，这是可能的。 随意更改课程以满足您的需求。

CSS：

body { position: relative; } .opti_wrapper { width: 500px; /* Change to suit your needs */ height: 80px; /* Change to suit your needs */ position: absolute; top: 0; right: 0; } .opti { width: 100%; height: 100%; box-shadow: 1px 0 rgba(0, 0, 0, 0.15); float: left; position: relative; overflow: hidden; } .opti:before { width: 100%; height: 100%; background: #8A0808; box-shadow: inset 0 1px rgba(255, 255, 255, 0.5), inset 1px 0 rgba(255, 255, 255, 1); content:''; position: absolute; top: 0; left: 0; transform-origin: top left; transform: skewX(45deg); /* Change to suit your needs */ }

HTML：

<div class="opti_wrapper"> <div class="opti"></div> </div>

这是一个Demo： jsFiddle DEMO

Thanks everyone, I see there are many different ways to achieve the same result, However as I needed to have this pattern as a background for my menu, I ended up using the bellow style:

.navbar { background: linear-gradient(45deg, white 25%, rgba(140, 25, 29, 1) 25%); background-size: 100% 100%; background-repeat: no-repeat; height: 90px; }