在主要内容下方设置形状的最佳方式是什么？

Question

我有一个响应式设计，如下图所示

复制左边这个形状的最佳方法是什么？我应该使用 img 吗？或者我应该把它写成 background images 吗？或将其用作 css 形状 ?

Answer 1

你可以使用线性渐变

.box{
width:200px;
height:350px;
background:white;
background: -moz-linear-gradient(125deg, red 30%, white 30%);
background: -webkit-linear-gradient(125deg, red 30%, white 30%);
background: -o-linear-gradient(125deg, red 30%, white 30%);
background: -ms-linear-gradient(125deg, red 30%, white 30%);
background: linear-gradient(125deg, red 30%, white 30%);
border: 1px solid #ccc;
}

<div class="box"></div>

在主要内容下方设置形状的最佳方式是什么？

What is the best way to have a shape below the main content?

css

background-image

css-shapes