I know this question has been asked in another form very popularly here:
How do CSS triangles work?
and I have extensively read the entire thread, but it does not address what I'm trying to do.
I want to make a cross-browser equilateral triangle clip that is responsive.
I found a lot of css like this that uses pixels:
#triangle-up {
width: 0;
height: 0;
border-left: 60px solid transparent;
border-right: 60px solid transparent;
border-bottom: 100px solid red;
}
But it's not responsive. I'm currently drawing it using polygon below like so:
.tri-Up {
-webkit-clip-path: polygon(50% 0, 0 100%, 100% 100%);
clip-path: polygon(50% 0, 0 100%, 100% 100%);
}
But this is not compatible in Firefox. I've been exploring this question for weeks, but have yet to find a way to clip a equilateral triangle, have it be responsive, and have it work in firefox, chrome, and Safari.
Any thoughts or attempts/success at this would garner much of my appreciation and respect.
Yeah it can be done, I needed that a while ago, and found a solution to this issue right here:
you can use a <div> or some other that you think it can represent a triangle, and a :pseudo selector from it (actually you can use 2x <div> and leave out the :pseudo selector)
the :pseudo selector can be used to represent the triangle itself, like you posted in your question, with border prop.
the parent <div> acts like a mask that either shrinks/grows the :pseudo selector, using a combination of width and padding specified in percetage
as this mask grows, with your container, more of the triangle is revealed and as soon as it shrinks, it covers up the triangle
the border prop set on the :pseudo element acts like a max-width to which the triangle will grow, so you can specify some larger values to it, to the point you think that will the max that it needs to be
Kudos for the author of this solution, and more about this:
One div, a :pseudo element, and a responsive triangle
Two divs and a responsive triangle
Documentation website
Check out the demo here or the snippet bellow:
*,
*:after,
*before {
box-sizing: border-box;
}
h3 {
margin: 10px;
text-align: center;
}
.small-container {
max-width: 10%;
float: left;
}
.medium-container {
max-width: 30%;
float: left;
}
.large-container {
float: left;
max-width: 50%;
}
.fancy-triangle {
width: 50%;
height: 0;
padding-left: 50%;
padding-bottom: 50%;
overflow: hidden;
}
.fancy-triangle:after {
content: "";
display: block;
width: 0;
height: 0;
margin-left: -2000px;
border-left: 2000px solid transparent;
border-right: 2000px solid transparent;
border-bottom: 2000px solid #4679BD;
}
<h3>Now isnt that nice?</h3>
<div class='fancy-triangle'></div>
UPDATE
Ok, since you need to actually mask a image in a sorta responsive triangle, the above method wont cut it.
Instead, you could use a svg and some percentage clip path points like so:
use the svg to draw up a triangle, used to clip the image if the clip-path isnt working properly custom points/shapes
then use the clip-path to draw a triangle with custom percentage points representing a triangle
Alternatively, you could a position absolute on the <img> wrapper, and set the width/height in some percentage values that will be bound to a set parent with a position relative, that will then grow/shrink with it.
Demo here
Resources
UPDATE V3
Instead of using a <img> tag you could alternatively use a <svg> with the src attr of you're image and it should work out pretty nice.
Demo here
Resources
.fancy-triangle-image {
max-width: 1200px;
-webkit-clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
clip-path: url(#triangle);
}
.fancy-triangle-image img{
width: 100%;
}
<div class='fancy-triangle-image'>
<img src='http://insolitebuzz.fr/wp-content/uploads/2014/10/test-all-the-things.jpg'/>
</div>
<svg display="none;">
<defs>
<clipPath id="triangle">
<polygon points="150 0, 300 300, 0 300" />
</clipPath>
</defs>
</svg>
The best bet I can think of is using vw as your unit on the triangle, as this is the only responsive unit that you can use in the border property. See gist here http://sassmeister.com/gist/1b0d70bf4cc35ff05fec
Browser support for vw is pretty good. http://caniuse.com/#search=vw
Related
I'm attempting to understand why in this codepen the two boxes aren't perfectly aligned.
https://codepen.io/mburke05/pen/BYXOGP
html
<div class="div_one">pixel</div>
<div class="div_two">percent</div>
css
.div_one {
border: solid red;
transform: translate(70px, 20%) ;
width: 140px;
height: 60px;
}
.div_two {
border: solid blue;
transform: translate(50%, 30%) ;
width: 140px;
height: 60px;
}
I thought I understood that, when using %'s rather than pixel or other values, that the % value was based on the height of the element itself rather than the % of the parent (which in this case would be the viewport.)
However, to achieve what I believe is alignment, I would need to set translate(48%, 30%) as the value. Why is this? Isn't 70 50% of 140, or is there more to it than I'm understanding.
As a follow-up, can anybody explain why this is the preferred way of centering an object vertically mathematically?
div {
box-sizing : border-box
}
By default in the CSS box model, the width and height you assign to an element is applied only to the element's content box. If the element has any border or padding, this is then added to the width and height to arrive at the size of the box that's rendered on the screen. This means that when you set width and height you have to adjust the value you give to allow for any border or padding that may be added.
Read More here
.div_one {
border: solid red;
width: 140px;
height: 60px;
}
.div_two {
border: solid blue;
width: 140px;
height: 60px;
}
remove CSS property "transform", Both Div will align perfectly and if you want to move the position of the box means use padding or margin and if you want to fix in box position then use Position property
This question already has answers here:
How to draw circle in html page?
(19 answers)
Closed 6 years ago.
In CSS it is allowed to write something like this.
#div-with-border {
width: 100%; // scales with parent wrapper
height: 30%; // scales with parent wrapper
border: 1px solid black;
border-radius: 10%;
}
If #div-width-border isn't a perfect square the border won't be a circle, since this means, that 10% of the width and 10% of the height are used for the border-radius (which differ). I would like to get perfect circles... I can't use px, since the border-radius depends on the height/width.
I'm sure that the width of #div-width-border is always greater than the height, of the element. I would need a border radius of the size 100% of element height to get a perfect circle, but just 100% won't do it, since it'll use the element width for one part of the radius calculation.
If you know the ratio between the width and the height, you may use the Slash-Annotation to specify different %-values for horizontal and vertical border-radius. An Example is below:
.wrapper {
width: 300px;
height: 300px;
margin: 0 auto;
}
.div-with-border {
width: 100%;
height: 25%;
background-color: blue;
border: 1px solid black;
border-radius: 10% / 40%;
}
<div class="wrapper">
<div class="div-with-border"></div>
</div>
Have you tried border-radius: 50%; ? Since you're saying that the div is a perfect square, setting border radius to 50% should work
I want to create triangle as shown in image.
Does someone know how to achieve the effect?
Here is a fiddle that should solve your problem. I used :before and :after on a container to place two squares over the container with borders to create the arrows. You can mess with the border colors and widths to get the arrows how you want them (just remember the inside borders have to be the same weight to make an symmetrical triangle).
http://jsfiddle.net/56gur0x4/1/
.hero {
background: url(http://d.pr/i/eqn9+);
height: 200px;
position: relative;
}
.hero:before, .hero:after {
box-sizing: border-box;
content: " ";
position: absolute;
top:0;
display: block;
width: 50%;
height: 100%;
border: 30px solid orange;
border-bottom-color: pink;
}
.hero:before {
left: 0;
border-right: 20px solid transparent;
border-left: 0;
}
.hero:after {
right: 0;
border-left: 20px solid transparent;
border-right: 0;
}
With newer browsers, you can use the clip-path CSS property. This is much less hacky, but you'll need a fallback for IE/Edge and older browsers.
Example
<div class="triangle"></div>
<style>
.triangle {
width: 400px;
height: 400px;
background-color: blue;
clip-path: polygon(50% 0, 0 100%, 100% 100%);
}
</style>
Triangle shape clip mask using CSS to clip image so that background appear.
You can achieve this kind of masking using clip property of CSS With SVG.
HTML
<svg width="0" height="0">
<clipPath id="clipping1" clipPathUnits="objectBoundingBox">
<polygon points="0 0, 0 1, 100 0, .6 0, .5 .2, .4 0">
</clipPath>
</svg>
<img class="clip-animation" alt="" src="http://c1.staticflickr.com/9/8449/7966887330_ddc8018682_h.jpg">
CSS
.clip-animation {clip-path: url(#clipping1);-webkit-clip-path: url(#clipping1); margin:100px; width:500px;}
body{ background-color:#CCCCCC;}
I have mask with an image tag you can also use this with div element or any other tag.
Check a working demo here.
http://jsfiddle.net/VijayDhanvai/495rpzdb/
Imagine the area with photo is split down the middle into two squares, with the photo as a background.
Now imagine you give those squares very thick top and bottom borders with colours corresponding to the areas above and below the photo.
Now imagine you also give them a very thick border for each of their adjacent sides (the left square has a right border, the right square has a left border), but this time, you make the border transparent.
You will see that where the top/bottom borders and the side borders meet, there is a diagonal edge between them where the colour changes to transparent. This leaves a transparent triangle in the adjacent corners where the background shows through.
I have a background image that has background-size:cover; applied to it and then a series of divs overlaid which I would like to become individual clipping masks.
I've looked at the feature clip: rect(20px, 20px, 20px, 20px,); however as the divs are brought in through a CMS system, it will be inappropriate to define set sizes.
Is there a way of setting the div with a clipping mask property so that it clips the image anywhere the div is placed on the page?
I don't particularly want to use an image overlay either as this site will be responsive.
If I understood correctly, you're simply looking for an overlay that will resize with the screen size, and the div with the background image?
In that case, if possible, why not simply append these divs INSIDE the div that needs clipping, like this. For this sample purpose I only used one div with a transparent background and a border applied to it. If you need to clip the image in a non-rectangular shape, you will need more divs (ex. for parallelogram, diamond, triangle shape, you'll need at least 2).
Also, sadly CSS doesn't allow for % borders, but I think this example is
You can also do it the other way around and place your img div inside the clipper divs; just a matter of what fits best...
body, html {
/* necessary for sizing children in % */
width: 100%;
height: 100%;
}
#tobeClipped {
width: 80%;
height: 40%;
position: relative;
background-image: url('http://cdn.theatlantic.com/static/infocus/ngpc112812/s_n01_nursingm.jpg');
background-size: cover;
}
#tobeClipped>div {
position: absolute;
}
#clippers {
width: 100%;
height: 100%;
border: 20px solid grey;
border-left-width: 100px;
box-sizing: border-box;
}
<div id="tobeClipped">
<div id="clippers"></div>
</div>
Please do clarify if this was not at all what you were looking for.
The clip-path CSS property can be applied to all HTML elements, SVG graphic elements and SVG container elements:
http://www.html5rocks.com/en/tutorials/masking/adobe/
I want to add some shine to an element on webpage. I would prefer if I don't have to add additional html to the page. I want the image to appear in front of the element rather than behind. What's the best way to do this?
To achieve a "foreground image" (without extra HTML code), you can use a pseudo-element (::before / :before) plus the CSS pointer-events. The last property is needed so that the user can actually click through the layer "as if it did not exist".
Here's an example (using a colour whose alpha channel is 50% so that you can see that the real elements can actually be focused). http://jsfiddle.net/JxNdT/
#cont {
width: 200px;
height: 200px;
border: 1px solid #aaa;
/*To show the boundaries of the element*/
}
#cont:before {
position: absolute;
content: '';
background: rgba(0, 0, 0, 0.5);
width: 200px;
height: 200px;
pointer-events: none;
}
<div id="cont">
Test<br>
<input type="text" placeholder="edit">
</div>
PS. I picked the ::before pseudo-element, because that naturally leads to the correct positioning. If I pick ::after, then I have to add position:relative; to the real element (#cont), and top:0;left:0; to the pseudo-element (::after).
PPS. To get the foreground effect on elements without a fixed size, an additional element is needed. This wrapper element requires the position:relative;display:inline-block; styles. Set the width and height of the pseudo-element to 100%, and the pseudo-element will stretch to the width and height of the wrapper element. Demo: http://jsfiddle.net/JxNdT/1/.
If you need a white-transparent foreground
This is for future visitors like me who are considering adding a white-transparent foreground to an element to communicate that it's hidden / disabled for instance. You can often achieve your goal by simply lowering the opacity below 1:
.is-hidden {
opacity: 0.5;
}
visible
<span class="is-hidden">hidden</span>
visible
You can use this css
#yourImage
{
z-index: 1;
}
NOTE
Set the z-index to index greater the the z-index of the element over which you are putting the image.
If you have not specified any z-index then 1 would do the work.
You can also set z-index to -1,in that case the image would always be at background!
A neat solution: box-sizing + padding-left, see more at css-tricks
Somewhere in your HTML:
<img id="test_replacement" src="test.png" alt="test" />
The CSS for replacing the image (on hovering)
#test_replacement {
width: 200px; //must be the size of your image (and the replacement one)
height: 200px; //idem
display: block;
}
#test_replacement:hover {
box-sizing: border-box;
background-image: url('somewhere/other_image.png');
padding-left: 200px; //at least the size of the width
}
Use an absolutely positioned <img> element:
img {
position: absolute;
opacity: 0.3;
pointer-events: none;
}
iframe {
width: 500px;
height: 300px;
border: 0;
}
<img src="https://i.stack.imgur.com/rET57.jpg" alt="Foreground image">
<iframe src="https://example.com/"></iframe>