CODEWITHSUNDEEP
cssimagewebkitlinear-gradients
Erica Stockwell-Alpert
Erica Stockwell-Alpert

Reputation: 4853

Creating image with css webkit-linear-gradient

Edit 3: After messing around with Fiddle, I've narrowed down on what is actually created that notch. Here's the Fiddle

What I can't figure out in this is what is determining the height of each part, the blue part and the red part.

Edit 2: I can see from inspecting the element in Chrome that the entire right-most part of the green box (the last 32px) is .callout-text::after. The green section with the notch in it is being created with background-image in the :after css.

Edit: I created a fiddle to work with: http://jsfiddle.net/ravencrowe/sk33jtz7/15/

As is typical on collaborative projects, I've been assigned to fix something that someone else created. I have a an image on the page that is created with css in a way I don't understand, so I don't really know how to change it. Any help is appreciated.

Here is the image on the page: 1

and here's what it needs to look like: 2

Notice how in the first image where the cutout is, there is an opaque triangle caused by the overlap of the transparent green sections. The cutout is also a tiny bit higher in the second image.

I know that the green part and the cutout is created by the css, but I don't really get how it works. Here's the css, callout-text is the green div with the text in it: 

.callout-text:after {
  right: -1em;
  background-image: -webkit-linear-gradient(-135deg, transparent 50%, #50925a 50%), -webkit-linear-gradient(135deg, #50925a 50%, transparent 50%);
  background-image: -moz-linear-gradient(-135deg, transparent 50%, #50925a 50%), -moz-linear-gradient(135deg, #50925a 50%, transparent 50%);
  background-image: -o-linear-gradient(-135deg, transparent 50%, #50925a 50%), -o-linear-gradient(135deg, #50925a 50%, transparent 50%);
  background-image: linear-gradient(-135deg, transparent 87%, rgba(81, 134, 83, 0.9) 50%), linear-gradient(135deg, rgba(81, 134, 83, 0.9) 88%, transparent 50%);
}

The green area needs to be transparent, but the place where it overlaps itself isn't supposed to be more opaque than the rest of the div. Also, I'm not sure how to make the notch higher up.

Upvotes: 0

Views: 138

Answers (2)

Paulie_D
Paulie_D

Reputation: 114991

The notch is created by having a pseudo-element, 100% height of the main div, positioned to the right.

This pseudo-element is the 'colored'by TWO linear gradients.

The vertical position of the notch is determined by the % values of the individual gradients (separated by 1%)

JSfiddle Demo

.callout,
.callout2 {
    width:200px;
    height:200px;
    background: lightblue;
    position: relative;
    display: inline-block;
    margin-right: 25px;
}
.callout:after {
    content:"";
    position: absolute;
    top:0;
    height:100%;
    width:1em;
    right: -1em;
    background-image:  /* 87% & 88% */
       linear-gradient(-135deg, transparent 87%, rgba(81, 134, 83, 0.9) 50%), 
       linear-gradient(135deg, rgba(81, 134, 83, 0.9) 88%, transparent 50%);
}

.callout2:after {
    content:"";
    position: absolute;
    top:0;
    height:100%;
    width:1em;
    right: -1em;
    background-image: /* 49% & 50% */
         linear-gradient(-135deg, transparent 49%, rgba(81, 134, 83, 0.9) 50%), 
         linear-gradient(135deg, rgba(81, 134, 83, 0.9) 50%, transparent 50%);
}

As such, I think it unlikely, using this technique, you will be able to remove the 'double-up' effect. An alternative would be to use TWO pseudo-elements and the usual triangle border technique.

A demonstration of THAT technique is shown here

JSfiddle Demo

CSS

.three:after,
.three:before {
    content:"";
    position: absolute;
    width:0;
    height:calc(50% - .335em);
}

.three:after {
    top:0;
    border:.5em solid rgba(81, 134, 83, 0.9);
    border-right-color:transparent;
    border-bottom-color:transparent;
    border-top-width:0;
    border-right-width:0;
    right: -.5em;
}

.three:before {
    top:50%;
    border:.5em solid rgba(81, 134, 83, 0.9);
    border-right-color:transparent;
    border-top-color:transparent;
    border-right-width:0;
    border-bottom-width:0;
    right:-.5em;
}

Upvotes: 1

Carlos Calla
Carlos Calla

Reputation: 6706

The triangle you see there is created by a little css trick using borders. See, on a div, you have element with 0 width and 0 height but a lot of border, lets say 30px border. Then you have something like this

enter image description here I am sorry, my paint skills are not so good :P. I wrote L for left border, R for right border, T for top border and B for bottom border.

You can see that border top is created at the top but is not all across the square, they end up with the sides cut up by the other border, in this case the border right and left. You see when your div has 0 width and 0 height and a lot of borders, these border are generated in a triangle form. If you had i.e 50px width and 50px height you will have something like this:

enter image description here Here you will see the same behaviour in borders but you don't actually see triangles because you have content inside. You will see a trapezium shape. When content is 0 width and 0 height now you understand why it looks like a triangle, because the trapezium has one side width 0 length.

Now you just have to find that element that has that border, and you now know that the left triangle in the first image probably has border color white and that's why you see the triangle opacated behind the green layer. You just have to give the border color a transparent one and you will deal with it.

Upvotes: 0

Related Questions