我怎样才能有css的背景形状？ [复制]答案

【问题标题】：how can i have background shapes with css? [duplicate]我怎样才能有css的背景形状？ [复制]
【发布时间】：2016-08-20 19:12:14
【问题描述】：

我使用具有转换的 css 属性的 div 实现了类似的功能：skew();

但是我希望它在直线上升的地方有一种曲线，所以如果你可以让我朝着正确的方向迈出一步，或者告诉我更多关于插入响应式 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;
}

【问题讨论】：

你能分享一下这个神奇形状的截图吗？
我们从你尝试过的开始怎么样，我们可以看看你为创建这个付出了哪些努力吗？
Power Exterminator：探索频道的新电视节目！ ;P
我不确定在这里使用 skew() 是否正确...
我尝试使用剪辑路径，但 Firefox 不支持它

标签： html css svg css-shapes

【解决方案1】：

您也可以使用 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>

codepen to play with

【讨论】：

【解决方案2】：

您可以将倾斜变换应用于伪元素（如::after），而无需使用 SVG 或影响主元素（也减少了对额外 HTML 元素的需求）：

header {
  background: #CCC;
  padding: 2em;
}

.skewed-bg {
    background: #830024;
    color: #FFF;
    padding: 2em;
    position: relative;
    min-height:300px;
    overflow:hidden;
}
.skewed-bg::after {
  content: '';
  position: absolute;
  bottom: -75%; left: 0; right: 0;
  height:100%;
  background:#FFF;
  transform: skew(0deg, -9deg);
}

<header>Power</header>
<div class="skewed-bg">
  Quienes Somos.
</div>

jsFiddle：https://jsfiddle.net/w6690acn/1/

【讨论】：

看起来好多了，非常感谢