White CSS arrow inside div - css

I'm looking to create this white arrow that goes inside the image with the HTML you can find in the snippet in a pure CSS way, not editing any HTML code.
.foto {
width: 100%;
float: left;
min-height: 215px;
background:
linear-gradient(to bottom right,transparent 50%,#fff 0) bottom right/10% 50% no-repeat, linear-gradient(to bottom left,#fff 50%,transparent 0%) top right/10% 50% no-repeat, url(https://s3.pagegear.co/1/contents/blog/2016/imagen_cachorro_comprimir.jpg) center/cover
}
<div class="foto bg_fix"><img src="https://s3.pagegear.co/1/contents/blog/2016/imagen_cachorro_comprimir.jpg" itemprop="image" width="724" height="230" style="display: none;"></div>

If you do not need to support Edge, you can get away with the clip-path. It's by far the easiest solution to your problem.
You can check the support on CanIUse
Also, amazingly helpful tool for this is Clippy, but don't forget to read about this technique on MDN - CSS clip-path.
.foto {
width: 100%;
float: left;
min-height: 215px;
-webkit-clip-path: polygon(100% 0%, 85% 50%, 100% 100%, 0 100%, 0% 50%, 0 0);
clip-path: polygon(100% 0%, 85% 50%, 100% 100%, 0 100%, 0% 50%, 0 0);
}
/* first value is X, and second value is Y coordinate. Feel free to experiment with percentages according to your needs. */
SOLUTION 2:
Old "trick" which has much much better support => CSS shapes.
You would basically need to create a new element (which is going to be your white triangle) and then put it on top of that image. Here's a sample code for a triangle that you need:
#triangle-left {
width: 0;
height: 0;
border-top: 50px solid transparent;
border-right: 100px solid red; /* red is just for display puproses */
border-bottom: 50px solid transparent;
}
<div id="triangle-left"><div>
Btw, you have both background-image and img tag in your html. Decide which one you want to use, and if you have problem with cropping the image, you may want to look into background position and/or object-fit.

You can correct you gradient like below. You were almost good, simply switch the position of both making the bottom one on the top and the top on on the bottom:
.foto {
min-height: 200px;
background:
linear-gradient(to bottom right,transparent 49.8%,#fff 50%) top right/10% 50%,
linear-gradient(to top right,transparent 49.8%,#fff 50%) bottom right/10% 50%,
url("https://s3.pagegear.co/1/contents/blog/2016/imagen_cachorro_comprimir.jpg") center/cover;
background-repeat:no-repeat;
}
<div class="foto bg_fix" ></div>

Related

Is it possible to make a hard-edged gradient on a large element?

I ran into a problem using a linear-gradient on a particularly large element.
On smaller elements, a hard edge can be achieved with the following:
background-image: linear-gradient(180deg, #000, #000 33%, #0f0 0);
However when the element has a very large height, the edge is soft. You can see in the following image and example below, the second version has a soft edge when the element is very large and the same gradient is applied.
I have tried many variations on the linear gradient and have been unable to achieve a hard edge on the large version. Is there a way to apply a gradient with a hard edge on a large element?
HTML example:
div {
height: 5000px;
background-repeat: no-repeat;
margin-bottom: 1em;
background-image: linear-gradient(180deg, #000, #000 20px, #0f0 0);
}
div:first-child {
height: 100px;
}
<div></div>
<div></div>
Edit
The goal of this gradient is for use with another background image, so I prefer techniques that are compatible with the following (don't cover the image):
div {
height: 5000px;
background-repeat: no-repeat;
margin-bottom: 1em;
background-image: url(http://placehold.it/600x20), linear-gradient(180deg, #000, #000 20px, #0f0 0);
}
<div></div>
Edit 2
Thanks to #Tarun, this appears to be browser related. The above image is a screenshot from Chromium 45. Safari and Firefox appear to render correctly.
Edit 3
There is an open bug report for chromium about this issue.
I've found an alternative using gradients to achieve the same effect, however I think it should be possible to achieve this with 1 gradient, so I consider this a work-around.
The trick is to use multiple backgrounds with 2 gradients that don't change color. Then just define background-size to achieve the hard edge effect. See the working snippet:
div {
height: 5000px;
background-repeat: no-repeat;
margin-bottom: 1em;
background-image: linear-gradient(#000, #000), linear-gradient(#0f0, #0f0);
background-size: 100% 20px, 100%;
}
div:first-child {
height: 100px;
}
<div></div>
<div></div>
This works for me.
background: linear-gradient(to bottom, black 0% ,black 20% ,green 20% ,green 100%);
edit: I've tried to do exactly what you're doing in the question, and I'm getting a hard edge on both boxes. Your problem must be related to your browser.
edit 2: confirmed
You could use box shadow for the same effect.
div {
height: 5000px;
}
div {
background: #0f0;
box-shadow: inset 0 100px 0 0 #000;
}
<div></div>
You need to repeat each color, and each percent rate of linear-gradient in a tricky, but expressive way. Let's see it in a six colors sample to understand the principle.
This approach works for any size of block.
div {
height: 100px;
background-repeat: no-repeat;
margin-bottom: 1em;
background-image:
linear-gradient(90deg,
red,
red 17%,
orange 17%,
orange 34%,
yellow 34%,
yellow 51%,
black 51%,
black 68%,
green 68%,
green 85%,
blue 85%);
}
<div></div>
You could use a bit more codespace and set up your gardient like following:
background: #4c4c4c;
background: linear-gradient(to bottom, #4c4c4c 0%,#2c2c2c 50%,#000000 51%,#131313 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4c4c4c', endColorstr='#131313',GradientType=0 );
The solid background setting is there to make sure your page is showing some color if the browser somehow fails to support this type of gardient or its filter.
It is also preferred to include -moz, -o and other browser-based fixups to make sure.

CSS3 How are zigzagged borders made?

I have been seeing a lot of new websites that have a zigzagged border in between an image and a div. When you open the image in a new tab the zigzag is not there, so it was created either with CSS3 or HTML5. Does anyone know how it is done?
Here are some examples:
http://themeforest.net/item/hungry-a-onepage-html-restaurant-template/full_screen_preview/9855248ref=freshdesignweb
http://designwp.com/yummie/brown/index.html
Wait for them to load.
zig zag borders are made using linear-gradient
50% is the blur
315deg is the rotation of right side
45deg is the rotation of left side
background size is the width and placement of the triangle
div {
width: 100%;
height: 50px;
background-size: 25px 120%;
background-image: linear-gradient(315deg, red 50%, rgba(0, 0, 0, 0) 50%),
linear-gradient(45deg, red 50%, black 50%);
}
<div></div>
you can also change the angle of rotation by changing the deg values
div {
width: 100%;
height: 50px;
background-size: 25px 150%;
background-image: linear-gradient(297deg, red 50%, rgba(0, 0, 0, 0) 50%),
linear-gradient(63deg, red 50%, black 50%);
}
<div></div>
First one is built with repeatable background image, and secound one with :before pseudo element:
.ss-style-top::before {
position: absolute;
content: '';
left: 0;
width: 100%;
height: 30px;
background-size: 25px 100%;
top: 0;
background-image: linear-gradient(315deg, #FFF 50%, transparent 50%),
linear-gradient(45deg, #FFF 50%, transparent 50%);
margin-top: -30px;
z-index: 100;
}
Here is the link of background image from first example: http://www.cssvillain.com/hungry/images/assets/parallax-bottom-alt.png

Use linear gradient in CSS to split div in 2 colors but not in equal halves

I am trying to achieve a typical style in a div by splitting it into 2 halves and then creating a diagonal in between so it looks good. Screenshot below:
<div class="contact hidden-xs">
<div class="diagonal"></div>
</div>
.contact{
width: 100%;
height: 500px;
background: linear-gradient(to right, #f87f73 50%, #292423 50%)
}
.diagonal{
margin-left: 50%;
width: 0px;
border-width: 500px 200px 0px 0px;
border-style: solid;
border-color: #f87f73 transparent transparent transparent;
}
This is how I have done this. Now my problem is that since I have that diagonal there, it is making the red part bigger by that much. And it does not look good in smaller screens. How do use the linear gradient property so that it is not 50% 50%, instead it is something like 40% 60%, so that the diagonal doesn't make much difference. When I try 40% 60% in the gradient property it is mixing up the gradients which is only logical. How to make this work?
i think this code will make effect like your screen shot.
put this code in selector you want too look like the screen shot.
background-color: #f87f73;
background-image: -webkit-linear-gradient( -28deg, #f87f73 0%, #f87f73 60%, #292423 60%, #292423 60%);
background-image: linear-gradient( -28deg, #f87f73 0%, #f87f73 60%, #292423 60%, #292423 60%);
You can do that using border and flexbox
Snippet
.content {
width: 100%;
background-color: grey;
display: flex;
justify-content: flex-end
}
.diagonal {
border-bottom: 100px solid red;
border-left: 75px solid rgba(0, 0, 0, 0);
height: 0;
width: 30%;
}
<div class="content">
<div class="diagonal"></div>
</div>
Please notice you can change the width as you need.

CSS advanced shape (heart cut out of background)

Basically I want to create a shape in CSS only (so no images) that is the opposite of a heart shape. I don't know how to explain it properly so here is an image:
The blue is the background, as you can see, but the shape that I want to create is not a heart, it is the shape of the black rectangle.
If I would have the following shape (THE GRAY NOT THE BLACK)
I could duplicate it and then rotate it, that would give me the shape I am looking for.
Heart shape cut out using box-shadow
Let's create this — the blue is the background color of <body>
The pieces
Feel free to skip directly to the complete demo at the bottom of this answer :)
1 - The rounded corners
The rounded top left and top right corners are created with box-shadow on the two pseudo elements with border-radius: 50% — .heart:before and .heart:after — They form two crescent shapes that look like this:
2 - The angle
The angled shape is created by the box-shadow on .heart. Combined with the two circles, it looks like this:
3 - The filler
We now need to fill in the gaps. This is done by the pseudo elements of the .box-shape container — .shape-box:before and .shape-box:after. The excess is cut-off neatly with overflow: hidden on the .shape-box. Combined with our pieces above, they look like this:
The Complete Example
Combine it all together and we get this nicely cut out heart shape. It is all contained in .shape-box.
body {
background: #00A2F6;
}
.shape-box {
height: 504px;
width: 504px;
position: relative;
margin: 100px;
overflow: hidden;
}
.shape-box:before,
.shape-box:after {
content: '';
display: block;
height: 100px;
width: 120px;
background: #2B2B2B;
transform: rotate(45deg);
left: 190px;
position: absolute;
top: 40px;
}
.shape-box:after {
width: 760px;
height: 750px;
box-shadow: inset 0 0 0 220px #2B2B2B;
top: -150px;
left: -130px;
background: none;
}
.heart {
transform: rotate(45deg);
height: 357px;
width: 356px;
box-shadow: inset 0 0 0 50px #2B2B2B;
position: absolute;
left: 74px;
top: 34px;
}
.heart:before,
.heart:after {
content: '';
display: block;
width: 151px;
height: 151px;
border-radius: 50%;
box-shadow: -40px -15px 0 20px #2B2B2B;
position: absolute;
left: 50px;
top: 157px;
}
.heart:after {
box-shadow: -15px -40px 0 21px #2B2B2B;
left: 156px;
top: 51px;
}
<div class="shape-box">
<div class="heart"></div>
</div>
This can be done with a combination of svg gradients, multiple backgrounds, and a little creative tiling/placement. Sample CSS from my working jsfiddle (without vendor prefixes, i.e. -webkit and -moz):
height: 400px;
width: 400px;
background-image:
radial-gradient(75% 85.5%, circle, transparent 25%, black 26%),
radial-gradient(25% 85.5%, circle, transparent 25%, black 26%),
linear-gradient(225deg, transparent 25%, black 25%),
linear-gradient(135deg, transparent 25%, black 25%);
background-size: 200px 200px;
background-position: top left, top right, bottom left, bottom right;
background-repeat: no-repeat;
This makes a heart-shaped cutout in the middle of a 400px square element. It can be modified to fit whatever size element you want.
Update: here’s a more complex fiddle that uses six gradients instead of four, but looks a bit nicer.
Based on the work that Mark Hubbart did I was able to push this to a slightly more advanced form in this fiddle
This is not 100% complete yet as it will need some media queries to work across more browsers but it does show the start of a much more flexible working for the same goal.
#backgrounder {
z-index: 2;
background-image:
radial-gradient(68% 100%, circle, transparent 48%, white 30%),
radial-gradient(32% 100%, circle, transparent 48%, white 30%),
radial-gradient(110% 1%, circle, transparent 65%, white 30%),
radial-gradient(-8.5% 1%, circle, transparent 65%, white 30%),
linear-gradient(220deg, transparent 41%, white 30%),
linear-gradient(139deg, transparent 41%, white 30%);
background-image:
-webkit-radial-gradient(68% 100%, circle, transparent 48%, white 30%),
-webkit-radial-gradient(32% 100%, circle, transparent 48%, white 30%),
-webkit-radial-gradient(110% 1%, circle, transparent 65%, white 30%),
-webkit-radial-gradient(-8.5% 1%, circle, transparent 65%, white 30%),
linear-gradient(220deg, transparent 41%, white 30%),
linear-gradient(139deg, transparent 41%, white 30%);
background-size: 51% 31%, 50% 31%, 51% 50%, 50% 50%, 51% 51%, 50% 51%;
background-position: top left, top right, 0% 30%, 100% 30%, bottom left, bottom right;
background-repeat: no-repeat;
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
}

CSS gradient colour stops from end in pixels

I'm working on a HTML/CSS/JS project where the app is a fixed size and elements must be positioned precisely, based on the designs. Because the window size is fixed, I can easily work with pixel dimensions in CSS and not worry about resizing the browser. I also have the luxury of not worrying about IE or Opera: the app must work in webkit and firefox only.
In a few places, I need to have a gradient background going over specific number of pixels. This would be easily accomplished with something like
background-image: linear-gradient(to top, #666666, #000000 60px);
(and its -webkit- and -moz- counterparts.) This does the trick for most elements. However there are a couple where I need to have the top and bottom pixel positions for colour stops. If these were percentage points, then it could be done with something like:
background-image: linear-gradient(to top, #666666, black 60px, transparent 60px, transparent 90%, black 90%, #666666);
(from grey to black over 60px, then transparent and then black to grey over the last 10%). However I need to accomplish the same with pixels, as the element in question is sized differently at different times. I'd like to avoid having to use JS to re-apply the gradient at different dynamically calculated percentage points if needed.
So, my question: is there a way to specify a colour stop x pixels (not percentage) from the end?
I just came over this via search engine, i think the best solution was already given by vals with using multiple background images - but instead of using background-size and background-position i think it's a lot more flexible and stable to use alpha colors here (with rgba()), like in the example below:
background-image:
/* top gradient - pixels fixed */
linear-gradient(to bottom, rgb(128,128,128) 0px,rgba(128,128,128,0) 16px),
/* bottom gradient - pixels fixed */
linear-gradient(to top, rgb(128,128,128) 0px, rgba(128,128,128,0) 16px),
/* background gradient - relative */
linear-gradient(to bottom, #eee 0%, #ccc 100%) ;
This gives me exactly the behaviour I was initially searching for. :)
Demo: http://codepen.io/Grilly86/pen/LVBxgQ
It works with calc(), but unfortunately not in MS browsers:
First row of each pairs has the solution with 2 background stacked, 2nd row has calc in use. Does not work with Internet Explorer and Edge browsers.
div {
margin-left: auto;
margin-right: 0;
width: 200px;
height: 20px;
animation: sweep 5s ease-in-out alternate infinite;
text-align: center;
color: white;
font-family: sans-serif;
font-weight: bold;
line-height: 20px;
will-change: width;
}
div:nth-child(odd) {
background-image: linear-gradient(to right, red, green 100px, transparent 101px), linear-gradient(to left, red, green 100px);
border-bottom: 1px solid gray;
}
div:nth-child(even) {
background-image: linear-gradient(to right, red, green 100px, green calc(100% - 100px), red);
margin-bottom: 10px;
}
div:nth-child(n+3) {
width: 300px;
}
div:nth-child(n+5) {
width: 400px;
}
div:nth-child(n+7) {
width: 500px;
}
div:nth-child(n+9) {
width: 600px;
}
#keyframes sweep {
100% {
width: 600px;
}
}
<div> 200 </div>
<div></div>
<div> 300 </div>
<div></div>
<div> 400 </div>
<div></div>
<div> 500 </div>
<div></div>
<div> 600 </div>
<div></div>
I don't think this is possible, but overlaying 2 objects, one with opaque pixels from bottom and the other with pixels from top, would still avoid using JS
.background {
position: absolute;
background-image: linear-gradient(to top, #666666, black 60px, transparent 60px);
}
.overlay {
position: relative;
background-image: linear-gradient(to bottom, #666666, black 60px, transparent 60px);
}
In the line of the previous answer from po228, but in the same element background.
Set 2 different gradients, one starting from top and the other from bottom
.test {
background: linear-gradient(to top, red 10px, white 10px),
linear-gradient(to bottom, blue 10px, white 10px);
background-size: 100% 50%;
background-repeat: no-repeat;
background-position: bottom center, top center;
height: 150px;
width: 300px;
}
<div class="test"></div>

Resources