I am using svg clip path to create a mask which on mobile overflows its container by a fixed pixel width. On mobile, this container is flush with the vertical edges of the viewport, so the desired effect is the clipped image being pulled both to the left and right of the viewport.
In firefox and chrome, the code I have written works well, however in Safari, there seems to be an interaction with overflow: hidden.
The following code explains it best, in this case I have set the section to a width of 400px to emulate the screen-width. If you open this code snipped in Firefox and Chrome, the code works perfectly, however in Safari the clipped image is bound between the edges of the 'viewport'. Is there any way to force the clipped image outside of its container while hiding the overflowing content?
section {
position: relative;
width: 400px;
height: 100vh;
margin: 0 auto;
overflow: hidden;
/* Changing overflow to visible gives desired effect apart from the overflow not being clipped */
/* overflow: visible; */
border: 1px solid red;
}
figure {
margin-left: -150px;
margin-right: -150px;
width: calc(100% + 300px);
height: 100%;
}
div {
background:url(https://picsum.photos/2000/1000?image=1069) center no-repeat;
clip-path: url(#overlay-clip);
-webkit-clip-path: url("#overlay-clip");
width: 100%;
height: 100%;
}
<section>
<figure>
<div>
</div>
</figure>
</section>
<svg width="0" height="0">
<clipPath id="overlay-clip" clipPathUnits="objectBoundingBox">
<path transform="scale(0.00089047195, 0.00178571428)" d="M561.490925 560c-.293288 0-.62491-.008736-.994142-.026062-.070349-.004215-.136781-.007594-.204373-.011238-.31743-.015917-.66661-.039172-1.042005-.06843-.092201-.008655-.177676-.015555-.264455-.022755l.010365.002366c-.412269-.034002-.854177-.074794-1.325199-.122269l-.013422-.003197a92.890823 92.890823 0 0 1-.184381-.018836l.013039.003222c-24.24249-2.492667-123.018479-22.100899-228.132231-45.129076-1.606552-.352154-3.215965-.705189-4.826617-1.058975-1.074535-.235909-2.148737-.472093-3.223417-.708597-1.190222-.261989-2.381524-.5244-3.573315-.787182a8131.510993 8131.510993 0 0 1-2.522405-.556599 8315.976609 8315.976609 0 0 1-4.538406-1.003371c-.841104-.186323-1.682394-.372712-2.523796-.559259-1.08599-.240602-2.171938-.48157-3.257998-.722789-4.519895-1.004178-9.042503-2.012634-13.561723-3.024338-1.046644-.233836-2.092877-.468249-3.138862-.702823-1.134674-.254994-2.269361-.509736-3.403672-.76465-1.369678-.307211-2.738607-.6152-4.106839-.923412-.784223-.177316-1.569371-.354319-2.35426-.531389-1.246045-.280395-2.490558-.561449-3.73431-.84265-.875436-.198702-1.751085-.396852-2.626317-.595068-93.026025-21.065294-181.33866-42.864655-217.756007-55.923117l.021827.00352c-.449605-.161063-.891324-.320796-1.325067-.479183l-.01994-.003314c-.402534-.147141-.79818-.293119-1.186863-.43792l.01693.002661c-.54822-.204019-1.08263-.4057-1.603029-.605005l-.017858-.003692c-.323323-.123975-.641222-.247031-.953649-.369158l.01652.003624c-.59217-.23119-1.164738-.459049-1.717374-.683512l-.010117-.001924a118.511716 118.511716 0 0 1-.450933-.184452c-.65704-.272016-1.292973-.540641-1.898-.80398-.036916-.014943-.071875-.030204-.10673-.045448-.652104-.285952-1.269112-.565191-1.848793-.838023-.016317-.007604-.031552-.014792-.04676-.021975-2.399772-1.131962-4.1557-2.153703-5.210037-3.053481C11.688401 416.036836 0 301.872305 0 279.984868c0-21.85112 11.6884-136.021704 37.866304-158.363112C64.280154 99.05639 530.261358 0 561.490925 0h.01815c31.229567 0 497.210775 99.05639 523.624625 121.621756C1111.3116 143.963164 1123 258.133748 1123 279.984868c0 21.887437-11.6884 136.051968-37.8663 158.393376-1.05434.899778-2.81027 1.921519-5.21127 3.054002-.01398.006662-.02921.01385-.04447.021042-.58074.273244-1.19775.552483-1.8513.837974-.03341.015705-.06837.030966-.10343.046246-.60688.263002-1.24281.531627-1.90904.805417-.13961.059452-.28993.120937-.44175.182678l-.01011.001924c-.55264.224463-1.12521.452322-1.71738.683512l.01652-.003624c-.31242.122127-.63032.245183-.95365.369158l-.01786.003692c-.52039.199305-1.0548.400986-1.60302.605005l.01693-.002661c-.38869.144801-.78433.290779-1.18687.43792l-.01994.003314c-.43374.158387-.87546.31812-1.32506.479183l.02182-.00352c-36.41734 13.058462-124.729979 34.857823-217.755104 55.923718-.876132.197615-1.751781.395765-2.627807.593843-1.243162.281825-2.487675.562879-3.732837.843764-.785772.17658-1.57092.353583-2.356297.530513-1.367078.308598-2.736007.616587-4.105485.924326-1.134511.254386-2.269198.509128-3.404177.76368-1.04568.235016-2.091913.469429-3.138327.703668-4.51945 1.011301-9.042058 2.019757-13.562719 3.023894-1.085294.24126-2.171242.482228-3.257003.722933-.841631.186444-1.682921.372833-2.524064.559055-1.513404.335139-3.026372.669641-4.538666 1.003567a9669.365611 9669.365611 0 0 1-2.521931.556481 8938.173235 8938.173235 0 0 1-3.573983.787234c-1.074187.236475-2.148389.472659-3.22204.70851-1.611536.353844-3.220949.706879-4.828879 1.059114-105.112374 23.028096-203.888363 42.636328-228.130853 45.128995l.013039-.003222a92.890823 92.890823 0 0 1-.184381.018836l-.013422.003197c-.471022.047475-.91293.088267-1.325199.122269l.010365-.002366a57.018152 57.018152 0 0 1-.256421.020701c-.383429.031312-.732609.054567-1.055139.071733-.062492.002395-.128924.005774-.194191.008887-.374314.018428-.705936.027164-.999224.027164h-.01815Z"/>
</clipPath>
</svg>
It seems to be a bug in Safari. I've had the problem myself and fixed it by forcing the hardware acceleration of the browser, i.e. I had to apply transform: translateZ(0); to the parent of the clipped element. As to why it's happening - I wasn't able to find out why, so it's just a solution.
For the sake of the demonstration, I copied the code from the original example and applied the fix, so that anyone could see the effect.
section {
position: relative;
width: 400px;
height: 100vh;
margin: 0 auto;
overflow: hidden;
/* Changing overflow to visible gives desired effect apart from the overflow not being clipped */
/* overflow: visible; */
border: 1px solid red;
}
figure {
margin-left: -150px;
margin-right: -150px;
width: calc(100% + 300px);
height: 100%;
transform: translateZ(0); /* <--- This is the culprit */
}
div {
background:url(https://picsum.photos/2000/1000?image=1069) center no-repeat;
clip-path: url(#overlay-clip);
-webkit-clip-path: url("#overlay-clip");
width: 100%;
height: 100%;
}
<section>
<figure>
<div>
</div>
</figure>
</section>
<svg width="0" height="0">
<clipPath id="overlay-clip" clipPathUnits="objectBoundingBox">
<path transform="scale(0.00089047195, 0.00178571428)" d="M561.490925 560c-.293288 0-.62491-.008736-.994142-.026062-.070349-.004215-.136781-.007594-.204373-.011238-.31743-.015917-.66661-.039172-1.042005-.06843-.092201-.008655-.177676-.015555-.264455-.022755l.010365.002366c-.412269-.034002-.854177-.074794-1.325199-.122269l-.013422-.003197a92.890823 92.890823 0 0 1-.184381-.018836l.013039.003222c-24.24249-2.492667-123.018479-22.100899-228.132231-45.129076-1.606552-.352154-3.215965-.705189-4.826617-1.058975-1.074535-.235909-2.148737-.472093-3.223417-.708597-1.190222-.261989-2.381524-.5244-3.573315-.787182a8131.510993 8131.510993 0 0 1-2.522405-.556599 8315.976609 8315.976609 0 0 1-4.538406-1.003371c-.841104-.186323-1.682394-.372712-2.523796-.559259-1.08599-.240602-2.171938-.48157-3.257998-.722789-4.519895-1.004178-9.042503-2.012634-13.561723-3.024338-1.046644-.233836-2.092877-.468249-3.138862-.702823-1.134674-.254994-2.269361-.509736-3.403672-.76465-1.369678-.307211-2.738607-.6152-4.106839-.923412-.784223-.177316-1.569371-.354319-2.35426-.531389-1.246045-.280395-2.490558-.561449-3.73431-.84265-.875436-.198702-1.751085-.396852-2.626317-.595068-93.026025-21.065294-181.33866-42.864655-217.756007-55.923117l.021827.00352c-.449605-.161063-.891324-.320796-1.325067-.479183l-.01994-.003314c-.402534-.147141-.79818-.293119-1.186863-.43792l.01693.002661c-.54822-.204019-1.08263-.4057-1.603029-.605005l-.017858-.003692c-.323323-.123975-.641222-.247031-.953649-.369158l.01652.003624c-.59217-.23119-1.164738-.459049-1.717374-.683512l-.010117-.001924a118.511716 118.511716 0 0 1-.450933-.184452c-.65704-.272016-1.292973-.540641-1.898-.80398-.036916-.014943-.071875-.030204-.10673-.045448-.652104-.285952-1.269112-.565191-1.848793-.838023-.016317-.007604-.031552-.014792-.04676-.021975-2.399772-1.131962-4.1557-2.153703-5.210037-3.053481C11.688401 416.036836 0 301.872305 0 279.984868c0-21.85112 11.6884-136.021704 37.866304-158.363112C64.280154 99.05639 530.261358 0 561.490925 0h.01815c31.229567 0 497.210775 99.05639 523.624625 121.621756C1111.3116 143.963164 1123 258.133748 1123 279.984868c0 21.887437-11.6884 136.051968-37.8663 158.393376-1.05434.899778-2.81027 1.921519-5.21127 3.054002-.01398.006662-.02921.01385-.04447.021042-.58074.273244-1.19775.552483-1.8513.837974-.03341.015705-.06837.030966-.10343.046246-.60688.263002-1.24281.531627-1.90904.805417-.13961.059452-.28993.120937-.44175.182678l-.01011.001924c-.55264.224463-1.12521.452322-1.71738.683512l.01652-.003624c-.31242.122127-.63032.245183-.95365.369158l-.01786.003692c-.52039.199305-1.0548.400986-1.60302.605005l.01693-.002661c-.38869.144801-.78433.290779-1.18687.43792l-.01994.003314c-.43374.158387-.87546.31812-1.32506.479183l.02182-.00352c-36.41734 13.058462-124.729979 34.857823-217.755104 55.923718-.876132.197615-1.751781.395765-2.627807.593843-1.243162.281825-2.487675.562879-3.732837.843764-.785772.17658-1.57092.353583-2.356297.530513-1.367078.308598-2.736007.616587-4.105485.924326-1.134511.254386-2.269198.509128-3.404177.76368-1.04568.235016-2.091913.469429-3.138327.703668-4.51945 1.011301-9.042058 2.019757-13.562719 3.023894-1.085294.24126-2.171242.482228-3.257003.722933-.841631.186444-1.682921.372833-2.524064.559055-1.513404.335139-3.026372.669641-4.538666 1.003567a9669.365611 9669.365611 0 0 1-2.521931.556481 8938.173235 8938.173235 0 0 1-3.573983.787234c-1.074187.236475-2.148389.472659-3.22204.70851-1.611536.353844-3.220949.706879-4.828879 1.059114-105.112374 23.028096-203.888363 42.636328-228.130853 45.128995l.013039-.003222a92.890823 92.890823 0 0 1-.184381.018836l-.013422.003197c-.471022.047475-.91293.088267-1.325199.122269l.010365-.002366a57.018152 57.018152 0 0 1-.256421.020701c-.383429.031312-.732609.054567-1.055139.071733-.062492.002395-.128924.005774-.194191.008887-.374314.018428-.705936.027164-.999224.027164h-.01815Z"/>
</clipPath>
</svg>
Related
I have a <div id="Frame"> element, within it is a <svg> element. I would like the <svg> element to be centered in the frame, and grow at a aspect ratio of 1/1, until one edge uses up say 90% of the available space (so it almost fills the whole space, but has a bit of a border).
But I can't get the SVG to grow. I read the many other similar SO answers, some say CSS overrides the width/height attributes of the SVG, but I tried removing them just incase (not ideal), but it still did not grow). The other common soluation is width: 100%; height: auto;, which did not work for me.
main {
padding: 0; margin: 0;
width: 100vw;
height: 100vh;
}
#FRAME {
padding: 0; margin: 0;
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
background-color: lightyellow;
position:relative;
}
#FRAME svg {
max-width: 90%;
max-height: 90%;
width: 90%;
height: auto;
aspect-ratio: 1/1;
flex-grow: 1;
}
<main>
<div id="FRAME">
<svg xmlns="http://www.w3.org/2000/svg" height="24" width="24">
<path d="M0 0h24v24H0z" fill="none"></path>
<path d="M3 5v14a2 2 0 0 0 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2H5a2 2 0 0 0-2 2zm12 4c0 1.66-1.34 3-3 3s-3-1.34-3-3 1.34-3 3-3 3 1.34 3 3zm-9 8c0-2 4-3.1 6-3.1s6 1.1 6 3.1v1H6v-1z"></path>
</svg>
</div>
</main>
You'll need to add a viewBox to the SVG to determine the SVG viewport.
Whilst the width and height attributes help with keeping the aspect ratio, viewBox helps with scaling the SVG contents correctly.
<svg xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 24 24">
<path d="M0 0h24v24H0z" fill="none"></path>
<path d="M3 5v14a2 2 0 0 0 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2H5a2 2 0 0 0-2 2zm12 4c0 1.66-1.34 3-3 3s-3-1.34-3-3 1.34-3 3-3 3 1.34 3 3zm-9 8c0-2 4-3.1 6-3.1s6 1.1 6 3.1v1H6v-1z"></path>
</svg>
I ran into a weird problem with Safari.
It seems to ignore the padding of a link when the span inside is inline-block.
Works in FF and Chrome but Safari just ignores the right padding.
I can add a padding to the span inside but then FF and Chrome have too much space on the right. The structure is generated by the speeddial component in primefaces so not easily changed.
Here's a Screenshot of the problem in Safari and Firefox for comparison.
Anyone ran into this problem before?
Thanks in advance!
ul{
width: 200px;
height: auto;
list-style: none;
}
li{
margin-bottom: 1em;
}
a{
display: inline-block;
background: red;
padding: 0 1em;
}
span{
white-space: nowrap;
}
svg{
margin-right: 0.5em;
max-width: 1.25rem;
vertical-align: bottom;
}
<ul>
<li>
<a href="#"><span>
<svg enable-background="new 0 0 20 21.4" viewBox="0 0 20 21.4">
<path d="m13.1 8.4v-6h1v-2h-8.2v2h1v6l-4.4 9.6c-.1.1-.1.3-.1.4v.5c0 .2 0 .4.1.6s.1.4.3.5c.2.3.4.5.7.7.2.2.5.3.9.3h11.2c.3 0 .7-.1 1-.3s.5-.4.7-.7c.2-.3.3-.6.3-1 0-.3 0-.7-.2-1zm-4.2.7c0-.1.1-.2.1-.2 0-.1 0-.1 0-.2v-6.2h2v6.2.2c0 .1 0 .2.1.2l2.1 4.7h-6.4z" fill="#fff"></path>
</svg>
Link text one
</span></a>
</li>
<li>
<a href="#"><span>
<svg enable-background="new 0 0 20 21.4" viewBox="0 0 20 21.4">
<path d="m13.1 8.4v-6h1v-2h-8.2v2h1v6l-4.4 9.6c-.1.1-.1.3-.1.4v.5c0 .2 0 .4.1.6s.1.4.3.5c.2.3.4.5.7.7.2.2.5.3.9.3h11.2c.3 0 .7-.1 1-.3s.5-.4.7-.7c.2-.3.3-.6.3-1 0-.3 0-.7-.2-1zm-4.2.7c0-.1.1-.2.1-.2 0-.1 0-.1 0-.2v-6.2h2v6.2.2c0 .1 0 .2.1.2l2.1 4.7h-6.4z" fill="#fff"></path>
</svg>
Link text
</span></a>
</li>
</ul>
I have a container with two elements inside. A Link tag and an inline svg.
My plan is to set the width of the container to the maximum width of its children, which I assume should be the content of the link tag with its padding.
Since the svg has no width defined and only uses a viewBox, I would assume the browser to scale the svg to the width of its parent container.
All browser except firefox are behaving like that. I don't understand why Firefox is stretching the container to 100% of the usable space, even larger than the viewbox of the svg.
div {
width: fit-content;
background: #344566;
}
a {
padding: 0 4rem;
color: white;
font-size: 2rem;
}
svg {
fill: white;
}
<div>
This is a link
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 492.004 492.004" style="enable-background:new 0 0 492.004 492.004" xml:space="preserve"><path d="M484.14 226.886 306.46 49.202c-5.072-5.072-11.832-7.856-19.04-7.856-7.216 0-13.972 2.788-19.044 7.856l-16.132 16.136c-5.068 5.064-7.86 11.828-7.86 19.04 0 7.208 2.792 14.2 7.86 19.264L355.9 207.526H26.58C11.732 207.526 0 219.15 0 234.002v22.812c0 14.852 11.732 27.648 26.58 27.648h330.496L252.248 388.926c-5.068 5.072-7.86 11.652-7.86 18.864 0 7.204 2.792 13.88 7.86 18.948l16.132 16.084c5.072 5.072 11.828 7.836 19.044 7.836 7.208 0 13.968-2.8 19.04-7.872l177.68-177.68c5.084-5.088 7.88-11.88 7.86-19.1.016-7.244-2.776-14.04-7.864-19.12z"/></svg>
</div>
I moved the SVG to be a background image of the link. This will make the link text control the size of the box. To make space for the background I added a block (a:after) after the link that has a padding of 100%. This is sometimes used for making a square, but is also useful in this situation.
div {
width: fit-content;
background: #344566;
}
a {
display: inline-block;
padding: 0 4rem;
color: white;
font-size: 2rem;
background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 492.004 492.004" style="enable-background:new 0 0 492.004 492.004;fill:white" xml:space="preserve"><path d="M484.14 226.886 306.46 49.202c-5.072-5.072-11.832-7.856-19.04-7.856-7.216 0-13.972 2.788-19.044 7.856l-16.132 16.136c-5.068 5.064-7.86 11.828-7.86 19.04 0 7.208 2.792 14.2 7.86 19.264L355.9 207.526H26.58C11.732 207.526 0 219.15 0 234.002v22.812c0 14.852 11.732 27.648 26.58 27.648h330.496L252.248 388.926c-5.068 5.072-7.86 11.652-7.86 18.864 0 7.204 2.792 13.88 7.86 18.948l16.132 16.084c5.072 5.072 11.828 7.836 19.044 7.836 7.208 0 13.968-2.8 19.04-7.872l177.68-177.68c5.084-5.088 7.88-11.88 7.86-19.1.016-7.244-2.776-14.04-7.864-19.12z"/></svg>');
background-repeat: no-repeat;
background-position: center 1rem;
background-size: contain;
}
a:after {
content: "";
display: block;
padding-top: 100%;
}
<div>
This is a link
</div>
Update
OP asks if the color of the background can be changed on hover. It cannot: Specify an SVG as a background image and ALSO style the SVG in CSS? - Stack Overflow. But in this case the SVG can be used as a mask on the element -- or like in this case -- on the after pseudo element. The SVG is masking the background-color -- and this can be changed on hover. Here I's using the currentColor value.
div {
width: fit-content;
background: #344566;
}
a {
display: inline-block;
padding: 0 4rem;
color: white;
font-size: 2rem;
}
a:after {
content: "";
display: block;
padding-top: 100%;
background-color: currentColor;
mask: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 492.004 492.004" style="enable-background:new 0 0 492.004 492.004;fill:white" xml:space="preserve"><path d="M484.14 226.886 306.46 49.202c-5.072-5.072-11.832-7.856-19.04-7.856-7.216 0-13.972 2.788-19.044 7.856l-16.132 16.136c-5.068 5.064-7.86 11.828-7.86 19.04 0 7.208 2.792 14.2 7.86 19.264L355.9 207.526H26.58C11.732 207.526 0 219.15 0 234.002v22.812c0 14.852 11.732 27.648 26.58 27.648h330.496L252.248 388.926c-5.068 5.072-7.86 11.652-7.86 18.864 0 7.204 2.792 13.88 7.86 18.948l16.132 16.084c5.072 5.072 11.828 7.836 19.044 7.836 7.208 0 13.968-2.8 19.04-7.872l177.68-177.68c5.084-5.088 7.88-11.88 7.86-19.1.016-7.244-2.776-14.04-7.864-19.12z"/></svg>');
}
a:hover {
color: orange;
}
<div>
This is a link
</div>
I'm trying to rotate a graph made in SVG when the viewport is smaller than 600px. I used a media querie and it work great but the svg is overflowing from it's container and whatever I do, I can't fix it.
Is it possible to fix it without javascript ?
I tried to use the preserveAspectRatio attribute and the viewbox attribute but it doesnt work.
Here's the code : https://codepen.io/telumire-the-sasster/pen/vYBxLRg
HTML :
<div class="container">
<svg viewBox="0 0 700 100" preserveAspectRatio="none" class="graphic" style="">
<polyline fill="red" stroke="none"
points="
0,0
0,15
100,14
200,18
300,21
400,23
500,22
600,17
700,17
700,0
0,0
"/>
</svg>
</div>
CSS :
.container {
background-color: green;
}
.graphic {
transform: scaleY(-1);
}
#media (max-width: 599px) {
/* smartphone */
.graphic {
transform: rotate(90deg);
height: 100%;
display: block;
}
}
I expect the svg to not overflow from the green container (it must fit it's height).
The height of your svg doesnt not exceed the height of your container. Problem is you turn your svg 90 degrees so that visually it's width becomes it's height, but that's only visually, cos it's still counted as width.
EDIT:
Added a jQuery solution. With this setup if viewport is smaller than 600 your svg will be rotated as before but JavaScript will replace height value with width value and width value with height value. Here is the code:
$(window).resize(function() {
if ($(window).width() <= 600) {
var h = $('#svg').height();
var w = $('#svg').width();
$('#svg').attr('width', h);
$('#svg').attr('height', w);
}
});
.container {
background-color: green;
}
.graphic {
transform: scaleY(-1);
}
#media (max-width: 599px) {
/* smartphone */
.container {
height: 200px;
}
.graphic {
transform: rotate(90deg);
height: 100%;
display: block;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<svg viewBox="0 0 700 100" preserveAspectRatio="none" class="graphic" style="" id="svg">
<polyline fill="red" stroke="none" points="
0,0
0,15
100,14
200,18
300,21
400,23
500,22
600,17
700,17
700,0
0,0
" />
</svg>
</div>
Other choice would be placing 2 svgs (one vertically and one horizontally aligned) and displaying only one of them at a time.
For anyone interested, I've finally settled with using 2 inline svg :
HTML :
<div class="container">
<svg
viewBox="0 0 700 100"
preserveAspectRatio="none"
class="graphic landscape"
>
<!-- <g transform="translate(0,100)"></g><g transform="scale(1,-1)"></g> -->
<polyline
fill="lightgrey"
stroke="none"
points="
0,0
0,60
100,56
200,72
300,84
400,92
500,88
600,68
700,68
700,0
"
/>
</svg>
<svg
viewBox="0 0 100 700"
preserveAspectRatio="none"
class="graphic portrait"
>
<!-- <g transform=" translate(0,100) "></g><g transform="scale(1,-1) "></g> -->
<polyline
fill="lightgrey "
stroke="none "
points="
0,0
60,0
56,100
72,200
84,300
92,400
88,500
68,600
68,700
0,700
"
/>
</svg>
</div>
CSS :
.container {
background-color: green;
height: 50vh;
}
.graphic {
transform: scaleY(-1);
overflow-x: hidden;
overflow-y: hidden;
}
.landscape {
display: block;
width: 100%;
/* max-height: 100%; */
height: 100%;
}
.portrait {
display: none;
height: 100%;
/* max-width: 100%; */
width: 100%;
}
#media (max-width: 599px) {
/* smartphone */
.portrait {
display: block;
}
.landscape {
display: none;
}
}
Next step is using js to automate the coordinate of the second graph I guess
EDIT: You should actually use display: none; and display: block; here, since visibility: hidden; and visibility: visible; doesnt show the tag too but allocate space for it and we want to avoid that.
TLDR: i want to achive this as scalable solution:
Longer explanation:
Target is to have a rotated div with a gradient as background. But the problem is that the rotation cant be defined as deg because it varies depending on the browser-width. So the element should be 100% width of the browser with a fixed height on the left and a fixed lower height on the right side.
Basically this can be done easily with an image-background which stretches only horizontally. Only problem is that there should be also a pattern overlay which should be clipped on the same area and this should repeat and not stretch (as you can see these pattern consists of equal boxes)
So my idea was: Is it possible to rotate an element for specific target pixels?
Current Example:
.triangleClipper {
height: 100px;
overflow: hidden;
}
.designElement {
background: linear-gradient(to right, #03cc65, #fbfe02);
height: 100px;
width: 200%;
transform-origin: top left;
transform: rotate(-2deg);
margin-top: -60px;
}
https://jsfiddle.net/0egg320q/
You see the problem on the right edge when resizing the browser. So on width screens you see the end of the triangle and small screens it is too high. Target is to remain same heights on left and right edges on every browser size.
Any other ideas are welcome.
You may use clip-path with percentage. Like this you will always have your fixed heights, then you may simply rotate the linear gradient as you need :
body {
background:#ccc;
}
.triangleClipper {
height: 100px;
overflow: hidden;
}
.designElement {
background: linear-gradient(10deg, #03cc65, #fbfe02);
height: 100px;
width: 100%;
-webkit-clip-path: polygon(120% 0, 0 0, 0 100%);
clip-path: polygon(120% 0, 0 0, 0 100%);
}
<div class="triangleClipper">
<div class="designElement"></div>
</div>
You only need to pay attention as this property it not supported by all browser.
Another solution using pseudo element, but in this case you will have the bottom part colored and not transparent :
body {
background:#ccc;
}
.triangleClipper {
height: 100px;
overflow: hidden;
}
.designElement {
background: linear-gradient(10deg, #03cc65, #fbfe02);
height: 100%;
width: 100%;
position:relative;
overflow:hidden;
}
.designElement:after {
content: "";
position: absolute;
border-right: 120vw solid #fff;
border-bottom: 100px solid #fff;
border-top: 100px solid transparent;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="triangleClipper">
<div class="designElement"></div>
</div>
UPDATE
Another good solution using skew transformation and some % properties. This solution will not make the heights fixed but it will make the ratio of the two height fixed. It can be interesting one too.
body {
background: #ccc;
}
.triangleClipper {
width: 100%;
overflow: hidden;
padding-top: 30%;
}
.designElement {
background: linear-gradient(to right, #03cc65, #fbfe02);
padding-top: 100%;
margin-top: -120%;
width: 100%;
transform: skewY(-7deg);
}
<div class="triangleClipper">
<div class="designElement"></div>
</div>
After searching for a cross-browser way for clip-path (especially IE) i found out that using an SVG is the best solution for that.
Sadly an SVG dont support percentage values for polygons so i could only fix this via adding JavaScript and correcting the values live depending on browser size.
(In basic the SVG works for scaling the object, JS is only there for correcting the pattern-image-output.)
$(function() {
//svg der fensterbreite anpassen
var fullWidth = $('.styleElementTop').width();
console.log(fullWidth);
$('.styleElementTop svg')[0].setAttribute('viewBox', '0 0 ' + fullWidth + ' 100');
$('.styleElementTop #gradientFill')[0].setAttribute('points', '0,0 0,100 ' + fullWidth + ',10 ' + fullWidth + ',0');
$('.styleElementTop #patternFill')[0].setAttribute('points', '0,0 0,100 ' + fullWidth + ',10 ' + fullWidth + ',0');
});
body {
padding: 0px;
margin: 0px;
}
.styleElementTop {
height: 100px;
width: 100%;
}
#gradientFill {
fill: url(#mainGradient);
}
#patternFill {
fill: url(#mainPattern);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="styleElementTop">
<svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 700 100" preserveAspectRatio="none">
<defs>
<linearGradient id="mainGradient">
<stop stop-color="#03cc65" offset="0%" />
<stop stop-color="#fbfe02" offset="100%" />
</linearGradient>
<pattern id="mainPattern" x="0" y="0" width="10" height="10" patternUnits="userSpaceOnUse">
<image width="10" height="10" xlink:href="https://live.tlprod.de/temp/whitepattern.png" />
</pattern>
</defs>
<polygon id="gradientFill" points="0,0 0,100 700,10 700,0"></polygon>
<polygon id="patternFill" points="0,0 0,100 700,10 700,0"></polygon>
</svg>
</div>