<分区>
html - 我怎样才能使用 css 设置背景形状？
标签 html css svg css-shapes
我使用具有 transform: skew(); 的 css 属性的 div 实现了类似的效果
但是我希望它在直线上升的地方有一条曲线，所以如果你能给我在正确方向上迈出的一步，或者告诉我更多关于插入响应式 svg 图形艺术的最简单方法特别是元素的背景或页面本身，我们将不胜感激
编辑:这是使用的 CSS
.skewed-bg{
background: #830024;
-webkit-transform: skew(0deg, -9deg);
transform: skew(0deg, -9deg);
margin-top: -200px;
}
.skewed-bg .container{
-webkit-transform: skew(0deg, 9deg);
transform: skew(0deg, 9deg);
padding-top: 200px;
color: white;
}
最佳答案
你也可以使用 linear-gradient(再次)，实际上是 2 和 background-size
body {
width: 80%;/* whatever , can be a fixed width , basicly to show behavior on resize */
margin: auto;
}
body>div {
background:
linear-gradient(to bottom right, #830024 50%, transparent 50.5%) no-repeat bottom,
/* bottom part */
linear-gradient(0deg, #830024, #830024) no-repeat top;
/* top portion */
color: white;
padding-bottom: 3em;
background-size: 100% 7em, 100% calc(100% - 7em)
}<div>
<h1>HTML Ipsum Presents</h1>
<p><strong>Pellentesque habitant morbi tristique</strong> senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris
placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis
tempus lacus enim ac dui. <a href="#">Donec non enim</a> in turpis pulvinar facilisis. Ut felis.</p>
<h2>Header Level 2</h2>
</div>
<ol>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Aliquam tincidunt mauris eu risus.</li>
</ol>关于html - 我怎样才能使用 css 设置背景形状？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36873711/