Gradient help to create a slanted div

问题:

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

回答1:

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.

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.

回答2:

I have attempted to make that in css as per ur image. http://jsfiddle.net/3zkme/- See if this could help. Thanks.

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

回答3:

You do not use a gradient for this, you just need to use a pseudo-element like :after.

Sample code:

#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

If you want the shape to be filled in with a gradient, you can do that, too. Just add that to the CSS:

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