I need to create a set of 3 triangles that each have content in them (images, copy, etc).
I have setup this Pen to show roughly what I'm trying to achieve: https://codepen.io/andystent/pen/OJyNdmB
And here is an image for quick reference:
In this example the "Top" and "Left" triangles are IMAGES with the clip-path applied and displaying perfectly.
The "Right" triangle (with the red background) is a DIV with the clip-path applied but the proportions are wrong.
It should look like a mirrored version of the "Left" triangle.
When I apply it to an image it is perfect but when I apply to the div it is not. What is the best way to do this?
I am new to SVG so it is extremely likely that I am not doing this correctly. I have looked at numerous posts and the method I have tried is from a few of those but without success... so now I'm reaching out to you geniuses...
Here's the HTML and CSS for the red "Right" triangle with the clip applied to the DIV in the CSS:
#right-wrapper {
position: absolute;
width: 50%;
height: 100%;
right: 0;
padding: 40px 20px;
box-sizing: border-box;
}
#right-content-div {
background-color: red;
height: 100%;
width: 100%;
position: absolute;
top: 0;
right: 0;
clip-path: url(#clip-path-right);
-webkit-clip-path: url(#clip-path-right);
display: flex;
justify-content: center;
align-items: center;
}
<div id="right-wrapper">
<svg width="100%" height="100%" viewBox="0 0 1220 1214" preserveAspectRatio="none">
<defs>
<clipPath id="clip-path-right">
<path d="M1232,1212.58943 L1232,4.82844551 C1232,3.17159126 1230.65685,1.82844551 1229,1.82844551 C1228.53907,1.82844551 1228.08435,1.93465364 1227.67111,2.13882722 L18.145562,599.743544 C13.1941115,602.189966 11.1633848,608.187127 13.6098071,613.138577 C14.582638,615.107544 16.1765951,616.701501 18.145562,617.674332 L1227.67111,1215.27905 C1229.15654,1216.01298 1230.95569,1215.40376 1231.68962,1213.91832 C1231.89379,1213.50508 1232,1213.05036 1232,1212.58943 Z" id="path-1">
</path>
</clipPath>
</defs>
<div id="right-content-div" preserveAspectRatio="none">
<h1>test heading</h1>
</div>
<!-- <image clip-path="url(#clip-path-right)" height="100%" width="100%" preserveAspectRatio="none" xlink:href="https://www.w3schools.com/css/klematis_big.jpg" /> -->
</svg>
</div>
----- UPDATE: -----
As suggested in the comments, I have created a simplified Pen that gets to the heart of what I'm trying to achieve and the embedded HTML and CSS is below.
Essentially I am trying to get the red <div> to be clipped exactly like the <image>.
https://codepen.io/andystent/pen/RwWRjLd
#right-content-div {
background-color: red;
height: 100%;
width: 100%;
position: absolute;
top: 0;
clip-path: url(#clip-path-right);
-webkit-clip-path: url(#clip-path-right);
}
<svg width="20%" height="20%" viewBox="0 0 1220 1214">
<defs>
<clipPath id="clip-path-right">
<path d="M1232,1212.58943 L1232,4.82844551 C1232,3.17159126 1230.65685,1.82844551 1229,1.82844551 C1228.53907,1.82844551 1228.08435,1.93465364 1227.67111,2.13882722 L18.145562,599.743544 C13.1941115,602.189966 11.1633848,608.187127 13.6098071,613.138577 C14.582638,615.107544 16.1765951,616.701501 18.145562,617.674332 L1227.67111,1215.27905 C1229.15654,1216.01298 1230.95569,1215.40376 1231.68962,1213.91832 C1231.89379,1213.50508 1232,1213.05036 1232,1212.58943 Z" id="path-1">
</path>
</clipPath>
</defs>
<image clip-path="url(#clip-path-right)" height="100%" width="100%" preserveAspectRatio="none" xlink:href="https://www.w3schools.com/css/klematis_big.jpg" />
</svg>
<div id="right-content-div" preserveAspectRatio="none">
<h1>test heading</h1>
</div>
Here is an idea where I will be using mask instead of clip-path. The main trick to correctly set the viewBox (you already have it in your code) add preserveAspectRatio="none" then have a mask size of 100% 100%
.box {
width:200px;
height:200px;
display:inline-block;
background:red;
}
.mask {
-webkit-mask:url('data:image/svg+xml;utf8,<svg preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1220 1214"> <path d="M1232,1212.58943 L1232,4.82844551 C1232,3.17159126 1230.65685,1.82844551 1229,1.82844551 C1228.53907,1.82844551 1228.08435,1.93465364 1227.67111,2.13882722 L18.145562,599.743544 C13.1941115,602.189966 11.1633848,608.187127 13.6098071,613.138577 C14.582638,615.107544 16.1765951,616.701501 18.145562,617.674332 L1227.67111,1215.27905 C1229.15654,1216.01298 1230.95569,1215.40376 1231.68962,1213.91832 C1231.89379,1213.50508 1232,1213.05036 1232,1212.58943 Z" /> </svg>') 0 0/100% 100%;
mask:url('data:image/svg+xml;utf8,<svg preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1220 1214"> <path d="M1232,1212.58943 L1232,4.82844551 C1232,3.17159126 1230.65685,1.82844551 1229,1.82844551 C1228.53907,1.82844551 1228.08435,1.93465364 1227.67111,2.13882722 L18.145562,599.743544 C13.1941115,602.189966 11.1633848,608.187127 13.6098071,613.138577 C14.582638,615.107544 16.1765951,616.701501 18.145562,617.674332 L1227.67111,1215.27905 C1229.15654,1216.01298 1230.95569,1215.40376 1231.68962,1213.91832 C1231.89379,1213.50508 1232,1213.05036 1232,1212.58943 Z" /> </svg>') 0 0/100% 100%;
}
<div class="box mask"></div>
<div class="box mask" style="width:300px;"></div>
<div class="box mask" style="height:300px;"></div>
<img src="https://i.picsum.photos/id/1074/200/200.jpg" class="mask">
How do I make an image shrink to fit inside a fixed position flex box modal?
When trying the below the image overlaps the header/footer. It needs to work for images both tall, or wide, and in IE.
.modal-dialog {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.modal-content {
display: flex;
flex-direction: column;
height: 100%;
}
.modal-header {
background: red;
margin: 20px;
}
.modal-body {
background: green;
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
margin: 0 20px;
}
.modal-footer {
background: blue;
margin: 20px;
}
<div class="modal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
header
</div>
<div class="modal-body">
<img src="https://via.placeholder.com/900x1200" />
</div>
<div class="modal-footer">
footer
</div>
</div>
</div>
</div>
Note this is a simple example, and I am really using a complicated SVG, not an image tag, so I can't use a background image.
You can use good old position: absolute with max-width and max-height:
/* for demonstration I have replaced all irrelavant styles with this */
.modal-body {
width: 80vw;
height: 60vh;
margin: 10% auto 0;
background: green;
}
/* parent must be positioned */
.modal-body {
position: relative;
}
/* size and center */
.modal-body img {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
max-width: 100%;
max-height: 100%;
margin: auto;
}
<div class="modal-body">
<img src="https://via.placeholder.com/900x1200" />
</div>
Just a reminder but by default images try to maintain their aspect ratios, so simply setting a percentage width will allow an inlined image to grow to the proper height OR setting only the height to a percentage will maintain the width.
The key is to only set ONE dimension and let the browser figure out the rest.
This is especially true if you set the sizes Inline using the appropriate HTML structure.
<div class="modal-body">
<img src="https://via.placeholder.com/900x1200" width="100%" />
</div>
Now you just set the max-width of the container with CSS and everything is happy. That should be true of any use of the img tag. Meaning if you use an SVG in the img src attribute you'll get it to function like an image. That said, I believe you lose SVG interactions if you do it that way.
So assuming you're going to actually drop the SVG into your code, you need to do a bit of work to the SVG.
Note how most SVG's have hard-coded heights and widths in the header Simply removing the hard-coded height/width "should" make the SVG scale correctly since the view-box keeps the proportions of the image.
<svg width="299px" height="138px" viewBox="0 0 299 138" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="example">
<rect id="Rectangle" fill="#D8D8D8" x="0" y="0" width="299" height="138"></rect>
<circle id="Oval" fill="#46BEC6" cx="53" cy="50" r="26"></circle>
<circle id="Oval-Copy" fill="#46BEC6" cx="105" cy="76" r="26"></circle>
<circle id="Oval-Copy-2" fill="#46BEC6" cx="165" cy="95" r="26"></circle>
<circle id="Oval-Copy-3" fill="#46BEC6" cx="217" cy="63" r="26"></circle>
<circle id="Oval-Copy-4" fill="#46BEC6" cx="269" cy="32" r="26"></circle>
</g>
</g>
</svg>
<svg viewBox="0 0 299 138" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="example">
<rect id="Rectangle" fill="#D8D8D8" x="0" y="0" width="299" height="138"></rect>
<circle id="Oval" fill="#46BEC6" cx="53" cy="50" r="26"></circle>
<circle id="Oval-Copy" fill="#46BEC6" cx="105" cy="76" r="26"></circle>
<circle id="Oval-Copy-2" fill="#46BEC6" cx="165" cy="95" r="26"></circle>
<circle id="Oval-Copy-3" fill="#46BEC6" cx="217" cy="63" r="26"></circle>
<circle id="Oval-Copy-4" fill="#46BEC6" cx="269" cy="32" r="26"></circle>
</g>
</g>
</svg>
If you don't know which one needs to be set (like in the case of a dynamic image) you'll need to measure it with javascript before applying the correct measurement. Something along these lines:
fixImage(){
var img = findTheImageInTheDom;
if (img.width > img.height){
img.width = "100%";
} else {
img.height = "100%";
}
Is there a way to apply a colour overlay to an SVG using CSS?
I have some SVGs (icons, shapes etc) that I need to be able to "tint" - adding a solid colour overlay but keep the transparency.
I read about the CSS filters, but none of them cater for adding a colour over the top, only stuff like blur or desaturate.
Please check this code snippet. I hope it will be help you.
<svg width="0" height="0" class="svg-visiblity">
<defs>
<path id="hex" d="M11.5,20.9L44.3,2c3.7-2.2,8.3-2.2,12.1,0l32.8,18.9c3.7,2.2,6,6.1,6,10.4v37.8c0,4.3-2.3,8.3-6,10.4 L56.3,98.4c-3.7,2.2-8.3,2.2-12.1,0L11.5,79.5c-3.7-2.2-6-6.1-6-10.4V31.3C5.4,27,7.7,23,11.5,20.9z"/>
<clipPath id="hex-clip-200">
<use xlink:href="#hex" transform="scale(2 2)" />
</clipPath>
</defs>
</svg>
<svg class="image-200-2">
<rect class="border" width="100%" height="100%" transform="scale(1.02)" style="clip-path: url(#hex-clip-200);" /></rect>
<image xlink:href="http://placehold.it/200x200" width="200" height="200" transform="translate(2 2)" style="clip-path: url(#hex-clip-200);"></image>
</svg>
CSS
.image-200-2 {
display: inline-block;
height: 205px;
width: 205px;
}
.image-200-2 .border {
fill: rgba(0, 0, 0, 0.5);
}
.svg-visiblity {
height: 0;
opacity: 0;
position: absolute;
width: 0;
}
See here: https://jsfiddle.net/zyr8wovg/4/
I am using google maps for interactive map. There is a limiatation the markers will always be a circle. I need circle along with intersection of 2 lines as shown below.
I dont have access to anything except CSS. Would it be possible to add CSS so I can get intersection of lines along SVG circle.
Here is my JSfiddle code where I tried to add lines to SVG circle.
http://jsfiddle.net/sreeram62/8QRAJ/
<svg height="210" width="500">
<circle cx="50" cy="50" r="5" stroke="black" stroke-width="0" fill="#00FFFF" />
Sorry, your browser does not support inline SVG.
</svg>
circle:after {
content: '';
display: block;
height: 1px;
width: 300px;
position: absolute;
top: 50%;
left: -125px;
background-color: #f00;
}
circle:before {
content: '';
display: block;
height: 300px;
width: 1px;
position: absolute;
left: 50%;
top: -125px;
background-color: #f00;
}
I think it's impossible or too hard, but I made sample code for this.
I use inline svg at filter property of circle element.
When I tested, this code worked fine at firefox only, not at chrome.
(I don't know this sample is useful for using google maps.)
see http://jsfiddle.net/defghi1977/39gjd/
svg:
<svg width="200px" height="200px" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1">
<circle cx="100" cy="100" r="10" fill="red"/>
</svg>
css:
circle{
filter: url("data:image/svg+xml;utf-8,<svg xmlns='http://www.w3.org/2000/svg'><defs><filter id='f' x='-3' y='-3' width='7' height='7' primitiveUnits='objectBoundingBox'><feFlood flood-color='black' x='-3' y='0.45' width='7' height='0.1' result='hb'/><feFlood flood-color='black' x='0.45' y='-3' width='0.1' height='7' result='vb'/><feMerge><feMergeNode in='SourceGraphic'/><feMergeNode in='hb'/><feMergeNode in='vb'/></feMerge></filter></defs></svg>#f");
}
This is a real css-challenge, I don't think this is possible:
I've made some white css triangles. and when you hover on a triangle, the white triangle should change in a photo also cropped like a triangle. I've made a jsfiddle for it:
fiddleLink
Any help appreciated
You can use svg to achieve this effect: http://jsfiddle.net/xTd6Y/4/
<div id="image-wrapper">
<svg id="svg-1" class="clip-svg">
<rect class='svg-background' width="300" height="300" fill="#ffffff" />
<image id="img-1" class='svg-image' width="300" height="300" xlink:href="http://lorempixel.com/300/300" />
</svg>
<svg id="svg-2" class="clip-svg">
<rect class='svg-background' width="300" height="300" fill="#ffffff" />
<image id="img-2" class='svg-image' width="300" height="300" xlink:href="http://lorempixel.com/300/301" />
</svg>
<svg id="svg-3" class="clip-svg">
<rect class='svg-background' width="300" height="300" fill="#ffffff" />
<image id="img-3" class='svg-image' width="300" height="300" xlink:href="http://lorempixel.com/300/302" />
</svg>
</div>
<svg id="svg-defs">
<defs>
<clipPath id="clip-triangle">
<polygon points="0, 200 100, 0 200, 200"/>
</clipPath>
</defs>
</svg>
css
body {
background-color: #e0e0e0;
}
#image-wrapper {
position: relative;
}
.svg-background, .svg-image {
clip-path: url(#clip-triangle);
}
.svg-image {
visibility: hidden;
}
.clip-svg .svg-image:hover {
visibility: inherit;
}
/* size and positioning */
svg.clip-svg {
position: absolute;
height: 250px;
width: 250px;
}
#svg-1 {
top: 110px;
left: 50px;
}
#svg-2 {
top: 40px;
left: 140px;
}
#svg-3 {
top: 160px;
left: 250px;
}
The clipping path is defined in svg#svg-defs, and can be set to whatever you like.
Image attributes are visible to / accessible by js and css.
You can apply the clipping path to any html element with css of
myElement {
clip-path: url(#clip-triangle);
}
but this is only reliable on firefox so far as I can tell.
Note: solution only tested on FF and chrome
note: small edit to move :hover from the svg to the embedded image, to correct problem with hover triggered outside clip area