渐变有助于创建一个倾斜的div

Question

所以我已经尝试用CSS实现这一形状，但没有很好的解决方案。我需要这个是一个图像，因为这个div可能会调整大小，我希望它保持不变。我也试图创建一个效果不佳的SVG，我看到有些人使用渐变来制作形状，但是我找不到任何好的指南来指出我正确的方向。任何帮助表示赞赏:)

Answer 1

使用具有角度的渐变不适合您的情况，因为（正如King King在评论中已经指出的那样）随着宽度的增加，渐变的角度（或）颜色停止百分比需要被修改以维持形状。这非常棘手，因此只有在形状具有固定尺寸时才能使用此方法。

然而渐变仍然可以使用 to [side] [side]语法，因为使用此语法定义的渐变可以适应容器大小的变化。在这种方法中，没有使用伪元素。

＆＃13;

＆＃13;

$(document).ready(function() {
  $('#increase').on('click', function() {
    $('.gradient').css('width', '300px').css('height', '500px');
  })
})

＆＃13;

div {
  display: inline-block;
  vertical-align: top;
  height: 300px;
  width: 100px;
  margin: 10px;
  color: beige;
  transition: all 1s;
}
.gradient {
  padding: 10px;
  background: linear-gradient(to top right, transparent 50%, tomato 50%) no-repeat, linear-gradient(to top right, transparent 0.1%, tomato 0.1%) no-repeat;
  background-size: 100% 100px, 100% 100%;
  background-position: 0% 100%, 0% -100px;
}
/* Just for demo */

body {
  background: -webkit-radial-gradient(50% 50%, circle, aliceblue, steelblue);
  background: radial-gradient(circle at 50% 50%, aliceblue, steelblue);
}

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="gradient">Some content</div>

<br>
<br>
<button id="increase">Increase Width &amp; Height</button>

＆＃13;

＆＃13;

＆＃13;

请注意，最好确保文本不会流入形状的倾斜部分，因为将文本环绕以适合形状并不是直接的。

Answer 2

我试图按照你的形象在css中制作它。 http://jsfiddle.net/3zkme/-看看这是否有帮助。谢谢。

HTML

<div style="margin:30px">
    <div class="trapezoid">
    </div>
</div>

CSS

.trapezoid{
    top: 150px;
    vertical-align: middle;
    border-bottom: 120px solid red;
    border-left: 200px solid transparent;
    border-top-left-radius:0px;
    height: 0;
    width: 150px;
    transform:rotate(270deg);
-ms-transform:rotate(270deg); /* IE 9 */
-webkit-transform:rotate(270deg); /* Opera, Chrome, and Safari */
}

/* ---------- */

.trapezoid {
    position:relative;
}
.trapezoid:after {
    content:' ';
    left:-14px;
    top:10px;
    position:absolute;
    background:red;
    border-radius:0px 0 0 0;
    width:164px;
    height:40px;
    display:block;
}

Answer 3

你没有使用渐变，你只需要使用像:after这样的伪元素。

示例代码：

#bookmark {
  width: 50px;
  height: 100px;
  position: relative;
  background: red;
}

#bookmark:after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 0;
  border-bottom: 35px solid #FFF;
  border-right: 50px solid transparent;
}

Live JSFiddle

如果您希望用渐变填充形状，也可以这样做。只需add that to the CSS：

background: linear-gradient(to right, #ff0000 0%,#B00000 100%);