渐变帮助创建一个倾斜的div [英] Gradient help to create a slanted div

问题描述

所以我一直在试图用CSS没有好的解决方案实现这一个形状。我需要这是一个形象，因为这个div可能会调整大小，我希望它保持完整。我也试图创建一个SVG，没有很好的工作，我看到一些人使用渐变，使形状，但我不能找到任何良好的指导，指向我的方向正确。任何帮助是赞赏:)

So I've been at it for a while trying to achieve this one shape with CSS with no good solutions. I need this to be an image because this div may resize and I want it to stay intact. I've also attempted to create an SVG which did not work out very well, I've seen some people work with gradient to make shapes but I'm not able to find any good guide to point me in the right direction. Any help is appreciated :)

推荐答案

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

Using gradients with angles is not fit for your case because (as already pointed out by King King in comments) as the width the increases, the angle of the gradient (or) the color stop percentages need to be modified to maintain the shape. That is very tricky and so this method can be employed only when the shape has fixed dimensions.

但是渐变仍然可以使用 code>到[side] [side] 语法，因为使用此语法定义的渐变可以适应容器大小的变化。在此方法中不使用伪元素。

However gradients can still be used with the to [side] [side] syntax because gradients defined using this syntax can adapt to variations in container sizes. In this method no pseudo-elements are used.

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

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);
}

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

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

Note that it is better to make sure that the text doesn't flow into the slanted section of the shape because wrapping the text around to fit within the shape is not straight-forward.

这篇关于渐变帮助创建一个倾斜的div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！