【问题标题】：Angled div background with linear and radial gradient具有线性和径向渐变的角度 div 背景
【发布时间】：2014-12-16 21:50:51
【问题描述】：

我目前正在使用 CSS3 制作一个左侧像梯形一样倾斜的 div，使用以下 CSS 改编自 jsfiddle：

background:linear-gradient(75deg, transparent 75px, #35753f 76px);

我想将以下 CSS 背景与径向背景相结合，以创建下图所示的效果。但是，当我这样做时，我失去了倾斜的一面。结合这两种背景的最佳方式是什么？

这是径向背景：

background:radial-gradient(circle closest-corner at right center, #337540 0%, #003832 100%);

它应该是这样的：

这是下面的jsfiddle：

.container {
  width: 1024px;
  margin: 0 auto;
}
.clearfix:after {
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}
#top-banner {
  position: relative;
}
#top-banner .container {
  height: 350px;
}
#top-banner #banner-right {
  width: 350px;
  height: 350px;
  background: -moz-linear-gradient(75deg, transparent 75px, #35753f 76px);
  background: -o-linear-gradient(75deg, transparent 75px, #35753f 76px);
  background: -webkit-linear-gradient(75deg, transparent 75px, #35753f 76px);
  background: linear-gradient(75deg, transparent 75px, #35753f 76px);
  position: relative;
  float: right;
}
#top-banner #banner-right:after {
  content: ".";
  display: block;
  height: inherit;
  width: 5000px;
  left: 350px;
  top: 0;
  position: absolute;
  /* IE10 Consumer Preview */
  background-image: -ms-radial-gradient(left center, circle closest-corner, #337540 0%, #003832 100%);
  /* Mozilla Firefox */
  background-image: -moz-radial-gradient(left center, circle closest-corner, #337540 0%, #003832 100%);
  /* Opera */
  background-image: -o-radial-gradient(left center, circle closest-corner, #337540 0%, #003832 100%);
  /* Webkit (Safari/Chrome 10) */
  background-image: -webkit-gradient(radial, left center, 0, left center, 140, color-stop(0, #337540), color-stop(1, #003832));
  /* Webkit (Chrome 11+) */
  background-image: -webkit-radial-gradient(left center, circle closest-corner, #337540 0%, #003832 100%);
  /* W3C Markup, IE10 Release Preview */
  background-image: ;
  z-index: -100;
}
/*#top-banner #banner-right {
	width:350px;
    height:350px;
    background:black;
    position:relative;
	float: right;	
}
#top-banner #banner-right:before {
	content:"";
    position:absolute;
    top:0;
    left:0;
    width: 0; 
    height: 0; 
    border-bottom: 350px solid white; 
    border-right: 40px solid transparent; 
}*/

#top-banner .slider {
  float: left;
  height: 350px;
  width: 100px;
  background-color: black;
  background-size: cover;
  shape-outside: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}

<div id="top-banner">
  <div class="container clearfix">
    <div id="banner-right">
    </div>
    <div class="slider">
      <img src="http://1.bp.blogspot.com/-9aQmrN3-xpQ/TuYsXHQygrI/AAAAAAAAAtw/cEmz4PgEQdQ/s1600/r-NEW-SPECIES-MEKONG-DELTA-huge.jpg" height="350" alt="banner-1" />
    </div>
  </div>
</div>

【问题讨论】：

你尝试过多种背景吗？
我试过用逗号分隔线性和放射状背景，但放射状背景总是迫使左边缘变直。

标签： css linear-gradients css-shapes radial-gradients

【解决方案1】：

如果您希望它与图片上显示的完全一样 - 请尝试 :before 伪类。

#div_with_background{
	position: relative;
	background: radial-gradient(circle closest-corner at 60% 50%, #33753E 0%, #003832 100%);
	width: 567px;
	height: 356px;
}
#div_with_background:before{
	content: "";
	position: absolute;
	top: 0px;
	left: 0px;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 356px 0 0px 130px;
	border-color: transparent transparent transparent #FFFFFF;
	z-index: 1;
}

&lt;div id="div_with_background"&gt;&lt;/div&gt;

【讨论】：

【解决方案2】：

有角度的 div - 2 种方法

角度是使用transform: rotate 创建的，而不是线性渐变。

#1 - 旋转 `:before` 并平移 3d

在本例中，translate3d(0px,0px,1px) 用于消除旋转元素的锯齿状边缘。 More information here.我被提醒了这种技术from this answer dealing with a similar rendering problem.

由于这是一种应谨慎使用的 hack，因此在第二个示例中，它们是一种替代方法来掩盖此边缘。

旋转 div 的伪元素 :before。这将创建我们的有角度的边缘
:before 得到一个适当的百分比高度，width: 100px 并被适当定位
父div被赋予overflow: hidden干净地切断背景
创建第二个伪元素:after，将背景扩展到视口边缘。
渐变背景应用于:after
:before 伪元素被赋予与渐变边缘相同颜色的纯色背景以进行混合
:before 和 :after 伪元素被赋予 z-index: 1
位于“背景”上方的元素需要position: relative 和z-index: 2 才能将它们推到其上方。（如下例中的段落）

示例

body 上的线性渐变表明 div 可以放置在任何背景上。

body {
  background: linear-gradient(#000 0%, #FFF 100%) no-repeat;
  margin: 0;
}
div {
  position: relative;
  height: 350px;
  overflow: hidden;
  padding-left: 100px;
  min-width: 500px;
}
div:before {
  content: '';
  display: block;
  position: absolute;
  height: 120%;
  width: 90px;
  top: -10%;
  left: 90px;
  background: #003832;
  transform:  translate3d(0px,0px,1px) rotate(-15deg);
  z-index: 1;
}
div:after {
  content: '';
  display: block;
  position: absolute;
  height: 120%;
  width: 100%;
  top: -10%;
  left: 135px;
  background: radial-gradient(circle closest-corner at 50% 50%, #33753E 0%, #003832 80%);
  z-index: 1;
}
p {
  color: #FFF;
  left: 10px;
  position: relative;
  z-index: 2;
}

<div>
  <p>This is some text</p>
</div>

#2 - 旋转 `:before` 和 `:after` 没有平移 3d

旋转 div 的伪元素 :before
为伪元素应用背景
伪元素获得height: 200% 和width: 200% 并被适当定位
父div被赋予overflow: hidden，干净利落地切断渐变，旋转后的伪元素成为背景
第二个伪元素:after 用于帮助用盒子阴影掩盖锯齿状边缘（左边缘在非 45 度增量的所有旋转中都是锯齿状的）
:before 和 :after 伪元素被赋予 z-index: 1
位于“背景”上方的元素需要position: relative 和z-index: 2 才能将它们推到其上方。（如下例中的段落）

示例 1

body {
  background: linear-gradient(#000 0%, #FFF 100%) no-repeat;
}
div {
  position: relative;
  width: 500px;
  height: 350px;
  overflow: hidden;
  padding-left: 100px;
}
div:before,
div:after {
  content: '';
  display: block;
  position: absolute;
  height: 200%;
  width: 200%;
  top: -220px;
  left: 90px;
  background: radial-gradient(circle closest-corner at 20% 50%, #33753E 0%, #003832 100%);
  transform: rotate(-15deg);
  z-index: 1;
}
div:after {
  top: -220px;
  left: 92px;
  box-shadow: 0 0 2px 2px #003832;
}
p {
  color: #FFF;
  z-index: 2;
  position: relative;
}

<div>
  <p>This is some text</p>
</div>

示例 2 - 扩展

body {
  background: linear-gradient(#000 0%, #FFF 100%) no-repeat;
  margin: 0;
}
div {
  position: relative;
  height: 350px;
  overflow: hidden;
  padding-left: 100px;
  max-width: 1600px;
}
div:before,
div:after {
  content: '';
  display: block;
  position: absolute;
  height: 300%;
  width: 300%;
  top: -200%;
  left: 90px;
  background: radial-gradient(circle closest-corner at 20% 50%, #33753E 0%, #003832 100%);
  transform: rotate(-15deg);
  z-index: 1;
}
div:after {
  left: 92px;
  box-shadow: 0 0 2px 2px #003832;
}
p {
  color: #FFF;
  z-index: 2;
  position: relative;
  left: 80px;
}

<div>
  <p>This is some text</p>
</div>