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

标签 css background-image css-shapes

<分区>

我有一个响应式设计,如下图所示 enter image description here

在左侧复制此形状的最佳方法是什么?我应该使用 img 吗?或者我应该把它作为 background images 吗?或者将其用作 css 形状?

最佳答案

你可以使用线性渐变

.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>

关于css - 在主要内容下方设置形状的最佳方式是什么?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46240263/

上一篇:html - 如何修改 Bootstrap 表单,使一些字段在屏幕左侧对齐,而其他字段在屏幕右侧对齐?

下一篇:javascript - Html ajax 订单,订购产品的发票

相关文章:

css - 是否有可能有一个相对显示 :inline-block

javascript - 调整弹出窗口的大小以缩放级别

css - 仅跨子项跨越父项的背景图像

html - 制作页脚,但在打印文档中的每个页面都与 CSS 不同

javascript - 从右到左出现的 div 部分

css - 滚动时 100% 背景图像包装消失的问题

html - 背景 : url(), 背景图像:url() 不工作

CSS3 菜单边框 - 右箭头效果

css - 是否可以使用 css3 内容技术制作 "double arrow"?

jquery - circlebar.js :11 Uncaught TypeError: $(. ..).find(...).circle 不是函数