Gradient on CSS triangle

Question

I have tried all kinds of things, but I am trying to basically this rectangle with a triangular side on the right. I am trying to get a drop shadow on it and also have a gradient on this. Does anybody know how I can get the gradient to show up properly on the right right side to match the rectangle? I am using border to create the triangle, which I feel like is one of the most common patterns for this.

Any suggestions would be welcomed. I have created a demo example on the right side.

http://sassmeister.com/gist/f49dd8f6ef8d3e121557

Muhammad Umer · Accepted Answer · 2014-05-12 23:42:27Z

4

Demo: http://jsfiddle.net/techsin/g2x99/

Update(vertical): http://jsfiddle.net/techsin/g2x99/4/

http://jsfiddle.net/techsin/g2x99/2/

It'd have been much easier to use image here..or SVG or canvas here.

Another downside of it is that background of corners isn't transparent.

body {background-color: #eee;}
.box {
    width: 100px;
    height: 40px;
    background-color: rgb(115, 115, 202);
    position: relative;
    background-image: -webkit-gradient(
    linear,
    left top,
    right top,
    color-stop(0, rgba(255, 255, 255,.2)),
    color-stop(1, rgba(0, 0, 0,.6))
);
}

.box:before,
.box:after {
    font-size: 0px; 
    content: ".";
    position: absolute;
    right: 0;    

}
.box:before {
    border-top: 20px solid transparent;
    border-right: 15px solid #eee;
    bottom: 0;
}
.box:after {
    border-top: 20px solid #eee;
    border-left: 15px solid transparent;
    top: 0;
}

edited May 12, 2014 at 23:42

answered May 12, 2014 at 23:26

Muhammad Umer

18.3k26 gold badges111 silver badges179 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Britton Over a year ago

Hey thanks for your effort here, I really need it to be a vertical gradient. I actually looked into doing it with SVG, but and ultimately could do it. I just really wanted to make sure to explore this with CSS first. Any ideas how I could do this with a gradient that goes from top to bottom?

Ruan Mendes Over a year ago

@Britton It's not that hard to change the gradient to be vertical jsfiddle.net/g2x99/3

Britton Over a year ago

I keep leaving out important details, so this works really well, except that I am building a menu and these will overlap. I have uploaded a screenshot showing exactly what we are running into here. <a href="tinypic.com?ref=302wf2w" target="_blank"><img src="i60.tinypic.com/302wf2w.png" border="0"></a>

Muhammad Umer Over a year ago

Take a look...jsfiddle.net/techsin/VXH8G But too many bugs and again i'd argue using image is much better you even make image expand.

Collectives™ on Stack Overflow

Gradient on CSS triangle

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related