SVG rounded triangle with gradient overlay and background image The 2019 Stack Overflow Developer Survey Results Are In Announcing the arrival of Valued Associate #679: Cesar Manara Planned maintenance scheduled April 17/18, 2019 at 00:00UTC (8:00pm US/Eastern) The Ask Question Wizard is Live! Data science time! April 2019 and salary with experienceHow to display a curved (rounded) bottom shape using CSS?placing background image in a rhombus shaped container is causing the container to lose its shapeDisplay SVG gradients using Flash?When to use IMG vs. CSS background-image?How do I give text or an image a transparent background using CSS?Stretch and scale a CSS image in the background - with CSS onlyHow do I combine a background-image and CSS3 gradient on the same element?Fill SVG path element with a background-imageHow to change color of SVG image using CSS (jQuery SVG image replacement)?Mask image with a triangle at the bottomSVG fill-rule cutout with different stroke widthsimagemagick - convert does not work with use xlink:href in SVG - possible?
Relations between two reciprocal partial derivatives?
Segmentation fault output is suppressed when piping stdin into a function. Why?
How to copy the contents of all files with a certain name into a new file?
Did the new image of black hole confirm the general theory of relativity?
What force causes entropy to increase?
Wall plug outlet change
Hiding Certain Lines on Table
Slither Like a Snake
Make it rain characters
Is every episode of "Where are my Pants?" identical?
Sort a list of pairs representing an acyclic, partial automorphism
What do you call a plan that's an alternative plan in case your initial plan fails?
How do I add random spotting to the same face in cycles?
Single author papers against my advisor's will?
Can a 1st-level character have an ability score above 18?
What LEGO pieces have "real-world" functionality?
What was the last x86 CPU that did not have the x87 floating-point unit built in?
Do warforged have souls?
Can the prologue be the backstory of your main character?
The variadic template constructor of my class cannot modify my class members, why is that so?
What can I do if neighbor is blocking my solar panels intentionally?
Keeping a retro style to sci-fi spaceships?
Match Roman Numerals
Is it ethical to upload a automatically generated paper to a non peer-reviewed site as part of a larger research?
SVG rounded triangle with gradient overlay and background image
The 2019 Stack Overflow Developer Survey Results Are In
Announcing the arrival of Valued Associate #679: Cesar Manara
Planned maintenance scheduled April 17/18, 2019 at 00:00UTC (8:00pm US/Eastern)
The Ask Question Wizard is Live!
Data science time! April 2019 and salary with experienceHow to display a curved (rounded) bottom shape using CSS?placing background image in a rhombus shaped container is causing the container to lose its shapeDisplay SVG gradients using Flash?When to use IMG vs. CSS background-image?How do I give text or an image a transparent background using CSS?Stretch and scale a CSS image in the background - with CSS onlyHow do I combine a background-image and CSS3 gradient on the same element?Fill SVG path element with a background-imageHow to change color of SVG image using CSS (jQuery SVG image replacement)?Mask image with a triangle at the bottomSVG fill-rule cutout with different stroke widthsimagemagick - convert does not work with use xlink:href in SVG - possible?
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty height:90px;width:728px;box-sizing:border-box;
2
I have the below code that is creating a simple rounded triangle shape with a purple gradient. I'm trying to insert a background image that will fill the shape underneath the gradient to create a similar effect to the screenshot below:
What I'm looking to achieve:
My code so far (doesn't show the image):
<svg width="100%" viewBox="0 0 1440 742" version="1.1"
baseProfile="full"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
xmlns:ev="http://www.w3.org/2001/xml-events">
<defs>
<linearGradient x1="100%" y1="50%" x2="0%" y2="50%" id="linearGradient-1">
<stop stop-color="#6300FF" stop-opacity="0.7" offset="0%"></stop>
<stop stop-color="#251D4B" offset="100%"></stop>
</linearGradient>
<pattern id="img1" patternUnits="userSpaceOnUse" width="1400" height="742">
<image xlink:href="https://upload.wikimedia.org/wikipedia/commons/1/11/Varkala_Beach_High_Res.jpg" x="0" y="0" width="1400" height="742" />
</pattern>
<path d="M526.611472,1330.75724 C526.681681,1330.68703 525.998884,-525.688822 526.611472,-525.076039 L1243.10385,191.419563 C1359.86286,308.179101 1359.86286,497.502097 1243.10385,614.261635 L526.611472,1330.75724 Z" id="path-2"></path>
</defs>
<g id="Desktop" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Knowledge-base-article">
<g id="businessman-in-workplace-PYDTUKV" transform="translate(-209.000000, -63.000000)">
<mask id="mask-3" fill="white">
<use xlink:href="#path-2"></use>
<use xlink:href="#img1"></use>
</mask>
<use id="Mask" fill="url(#linearGradient-1)" transform="translate(928.513633, 402.840523) scale(-1, 1) rotate(90.000000) translate(-928.513633, -402.840523) " xlink:href="#path-2"></use>
</g>
</g>
</g>
</svg>css image svg mask clip-path
asked Feb 1 at 15:22
egr103egr103
1,523134993
add a comment |
2
I have the below code that is creating a simple rounded triangle shape with a purple gradient. I'm trying to insert a background image that will fill the shape underneath the gradient to create a similar effect to the screenshot below:
What I'm looking to achieve:
My code so far (doesn't show the image):
<svg width="100%" viewBox="0 0 1440 742" version="1.1"
baseProfile="full"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
xmlns:ev="http://www.w3.org/2001/xml-events">
<defs>
<linearGradient x1="100%" y1="50%" x2="0%" y2="50%" id="linearGradient-1">
<stop stop-color="#6300FF" stop-opacity="0.7" offset="0%"></stop>
<stop stop-color="#251D4B" offset="100%"></stop>
</linearGradient>
<pattern id="img1" patternUnits="userSpaceOnUse" width="1400" height="742">
<image xlink:href="https://upload.wikimedia.org/wikipedia/commons/1/11/Varkala_Beach_High_Res.jpg" x="0" y="0" width="1400" height="742" />
</pattern>
<path d="M526.611472,1330.75724 C526.681681,1330.68703 525.998884,-525.688822 526.611472,-525.076039 L1243.10385,191.419563 C1359.86286,308.179101 1359.86286,497.502097 1243.10385,614.261635 L526.611472,1330.75724 Z" id="path-2"></path>
</defs>
<g id="Desktop" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Knowledge-base-article">
<g id="businessman-in-workplace-PYDTUKV" transform="translate(-209.000000, -63.000000)">
<mask id="mask-3" fill="white">
<use xlink:href="#path-2"></use>
<use xlink:href="#img1"></use>
</mask>
<use id="Mask" fill="url(#linearGradient-1)" transform="translate(928.513633, 402.840523) scale(-1, 1) rotate(90.000000) translate(-928.513633, -402.840523) " xlink:href="#path-2"></use>
</g>
</g>
</g>
</svg>css image svg mask clip-path
asked Feb 1 at 15:22
egr103egr103
1,523134993
add a comment |
2
2
2
1
I have the below code that is creating a simple rounded triangle shape with a purple gradient. I'm trying to insert a background image that will fill the shape underneath the gradient to create a similar effect to the screenshot below:
What I'm looking to achieve:
My code so far (doesn't show the image):
<svg width="100%" viewBox="0 0 1440 742" version="1.1"
baseProfile="full"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
xmlns:ev="http://www.w3.org/2001/xml-events">
<defs>
<linearGradient x1="100%" y1="50%" x2="0%" y2="50%" id="linearGradient-1">
<stop stop-color="#6300FF" stop-opacity="0.7" offset="0%"></stop>
<stop stop-color="#251D4B" offset="100%"></stop>
</linearGradient>
<pattern id="img1" patternUnits="userSpaceOnUse" width="1400" height="742">
<image xlink:href="https://upload.wikimedia.org/wikipedia/commons/1/11/Varkala_Beach_High_Res.jpg" x="0" y="0" width="1400" height="742" />
</pattern>
<path d="M526.611472,1330.75724 C526.681681,1330.68703 525.998884,-525.688822 526.611472,-525.076039 L1243.10385,191.419563 C1359.86286,308.179101 1359.86286,497.502097 1243.10385,614.261635 L526.611472,1330.75724 Z" id="path-2"></path>
</defs>
<g id="Desktop" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Knowledge-base-article">
<g id="businessman-in-workplace-PYDTUKV" transform="translate(-209.000000, -63.000000)">
<mask id="mask-3" fill="white">
<use xlink:href="#path-2"></use>
<use xlink:href="#img1"></use>
</mask>
<use id="Mask" fill="url(#linearGradient-1)" transform="translate(928.513633, 402.840523) scale(-1, 1) rotate(90.000000) translate(-928.513633, -402.840523) " xlink:href="#path-2"></use>
</g>
</g>
</g>
</svg>css image svg mask clip-path
asked Feb 1 at 15:22
egr103egr103
1,523134993
I have the below code that is creating a simple rounded triangle shape with a purple gradient. I'm trying to insert a background image that will fill the shape underneath the gradient to create a similar effect to the screenshot below:
What I'm looking to achieve:
My code so far (doesn't show the image):
<svg width="100%" viewBox="0 0 1440 742" version="1.1"
baseProfile="full"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
xmlns:ev="http://www.w3.org/2001/xml-events">
<defs>
<linearGradient x1="100%" y1="50%" x2="0%" y2="50%" id="linearGradient-1">
<stop stop-color="#6300FF" stop-opacity="0.7" offset="0%"></stop>
<stop stop-color="#251D4B" offset="100%"></stop>
</linearGradient>
<pattern id="img1" patternUnits="userSpaceOnUse" width="1400" height="742">
<image xlink:href="https://upload.wikimedia.org/wikipedia/commons/1/11/Varkala_Beach_High_Res.jpg" x="0" y="0" width="1400" height="742" />
</pattern>
<path d="M526.611472,1330.75724 C526.681681,1330.68703 525.998884,-525.688822 526.611472,-525.076039 L1243.10385,191.419563 C1359.86286,308.179101 1359.86286,497.502097 1243.10385,614.261635 L526.611472,1330.75724 Z" id="path-2"></path>
</defs>
<g id="Desktop" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Knowledge-base-article">
<g id="businessman-in-workplace-PYDTUKV" transform="translate(-209.000000, -63.000000)">
<mask id="mask-3" fill="white">
<use xlink:href="#path-2"></use>
<use xlink:href="#img1"></use>
</mask>
<use id="Mask" fill="url(#linearGradient-1)" transform="translate(928.513633, 402.840523) scale(-1, 1) rotate(90.000000) translate(-928.513633, -402.840523) " xlink:href="#path-2"></use>
</g>
</g>
</g>
</svg> <svg width="100%" viewBox="0 0 1440 742" version="1.1"
baseProfile="full"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
xmlns:ev="http://www.w3.org/2001/xml-events">
<defs>
<linearGradient x1="100%" y1="50%" x2="0%" y2="50%" id="linearGradient-1">
<stop stop-color="#6300FF" stop-opacity="0.7" offset="0%"></stop>
<stop stop-color="#251D4B" offset="100%"></stop>
</linearGradient>
<pattern id="img1" patternUnits="userSpaceOnUse" width="1400" height="742">
<image xlink:href="https://upload.wikimedia.org/wikipedia/commons/1/11/Varkala_Beach_High_Res.jpg" x="0" y="0" width="1400" height="742" />
</pattern>
<path d="M526.611472,1330.75724 C526.681681,1330.68703 525.998884,-525.688822 526.611472,-525.076039 L1243.10385,191.419563 C1359.86286,308.179101 1359.86286,497.502097 1243.10385,614.261635 L526.611472,1330.75724 Z" id="path-2"></path>
</defs>
<g id="Desktop" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Knowledge-base-article">
<g id="businessman-in-workplace-PYDTUKV" transform="translate(-209.000000, -63.000000)">
<mask id="mask-3" fill="white">
<use xlink:href="#path-2"></use>
<use xlink:href="#img1"></use>
</mask>
<use id="Mask" fill="url(#linearGradient-1)" transform="translate(928.513633, 402.840523) scale(-1, 1) rotate(90.000000) translate(-928.513633, -402.840523) " xlink:href="#path-2"></use>
</g>
</g>
</g>
</svg> <svg width="100%" viewBox="0 0 1440 742" version="1.1"
baseProfile="full"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
xmlns:ev="http://www.w3.org/2001/xml-events">
<defs>
<linearGradient x1="100%" y1="50%" x2="0%" y2="50%" id="linearGradient-1">
<stop stop-color="#6300FF" stop-opacity="0.7" offset="0%"></stop>
<stop stop-color="#251D4B" offset="100%"></stop>
</linearGradient>
<pattern id="img1" patternUnits="userSpaceOnUse" width="1400" height="742">
<image xlink:href="https://upload.wikimedia.org/wikipedia/commons/1/11/Varkala_Beach_High_Res.jpg" x="0" y="0" width="1400" height="742" />
</pattern>
<path d="M526.611472,1330.75724 C526.681681,1330.68703 525.998884,-525.688822 526.611472,-525.076039 L1243.10385,191.419563 C1359.86286,308.179101 1359.86286,497.502097 1243.10385,614.261635 L526.611472,1330.75724 Z" id="path-2"></path>
</defs>
<g id="Desktop" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Knowledge-base-article">
<g id="businessman-in-workplace-PYDTUKV" transform="translate(-209.000000, -63.000000)">
<mask id="mask-3" fill="white">
<use xlink:href="#path-2"></use>
<use xlink:href="#img1"></use>
</mask>
<use id="Mask" fill="url(#linearGradient-1)" transform="translate(928.513633, 402.840523) scale(-1, 1) rotate(90.000000) translate(-928.513633, -402.840523) " xlink:href="#path-2"></use>
</g>
</g>
</g>
</svg>css image svg mask clip-path
css image svg mask clip-path
asked Feb 1 at 15:22
egr103egr103
1,523134993
asked Feb 1 at 15:22
egr103egr103
1,523134993
edited Feb 1 at 15:29
egr103
asked Feb 1 at 15:22
egr103egr103
1,523134993
asked Feb 1 at 15:22
egr103egr103
1,523134993
asked Feb 1 at 15:22
egr103egr103
1,523134993
1,523134993
add a comment |
add a comment |
2 Answers
2
active
oldest
votes
2
I would go with a pure CSS solution using some transformation like below
.container
width:300px;
height:300px;
margin:auto;
position:relative;
overflow:hidden;
.container > div
position:absolute;
width:100%;
height:100%;
border-radius:80px;
transform-origin:top left;
transform:translateX(-20%) rotate(-45deg);
overflow:hidden;
.container > div:before
content:"";
position:absolute;
width:calc(100% * 1.4);
height:calc(100% * 1.4);
transform:rotate(45deg);
transform-origin:top left;
background:
linear-gradient(to top,rgba(99, 0, 255, 0.7),#251D4B),
url(https://picsum.photos/300/300?image=1069) top/cover;
<div class="container">
<div></div>
</div>With the container as full width:
.container
margin:auto;
position:relative;
overflow:hidden;
.container > div
width:100%;
padding-top:100%;
border-radius:15%;
transform-origin:top left;
transform:translateY(-15%) translateX(-21%) rotate(-45deg);
overflow:hidden;
.container > div:before
content:"";
position:absolute;
top:0;
left:0;
width:calc(100% * 1.4);
height:calc(100% * 1.4);
transform:rotate(45deg);
transform-origin:top left;
background:
linear-gradient(to top,rgba(99, 0, 255, 0.7),#251D4B),
url(https://picsum.photos/300/300?image=1069) top/cover;
<div class="container">
<div></div>
</div>answered Feb 1 at 15:39
Temani AfifTemani Afif
83k104795
A great solution, however when changing .container to 100% width thats where issues begin to arise
– egr103
Feb 4 at 12:26
@egr103 check the update ;) we can do with 100%
– Temani Afif
Feb 4 at 12:30
OK great, looks good. Just so I can understand, what is width: calc(100% * 1.4); doing on the pseudo element?
– egr103
Feb 4 at 13:03
@egr103 well you can replace it by 140% .. the 1.4 issqrt(2). Chech this if you want more details about the calculation : stackoverflow.com/a/51689026/8620333
– Temani Afif
Feb 4 at 13:10
I understand its a calculation but is it simply to make the image bigger than the container so it covers the shape?
– egr103
Feb 4 at 13:39
|
show 1 more comment
1
Use the <path> as a <mask>. Then use that <mask> on a your <image>, then use that same <mask> on a <rect> that sits on top. Finally fill the <rect> with your <gradient>.
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 800">
<defs>
<linearGradient x1="100%" y1="50%" x2="0%" y2="50%" id="gradient">
<stop stop-color="#6300FF" stop-opacity="0.7" offset="0%"></stop>
<stop stop-color="#251D4B" offset="100%"></stop>
</linearGradient>
<mask id="mask">
<path d="M812.532 489.667L1306.8 -4.60034H-106L388.268 489.667C505.425 606.825 695.374 606.825 812.532 489.667Z" fill="#C4C4C4"/>
</mask>
</defs>
<image xlink:href="https://upload.wikimedia.org/wikipedia/commons/1/11/Varkala_Beach_High_Res.jpg" x="0" y="0" width="1200" height="800" mask="url(#mask)" />
<rect width="1400" height="742" mask="url(#mask)" fill="url(#gradient)"></rect>
</svg>answered Feb 1 at 16:09
ksavksav
5,47421433
1
A great solution, however a pure css solution, although not what I asked for was a bonus that worked perfectly for my scenario.
– egr103
Feb 4 at 13:55
add a comment |
Your Answer
StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");
StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);
else
createEditor();
);
function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);
);
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54482351%2fsvg-rounded-triangle-with-gradient-overlay-and-background-image%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
2
I would go with a pure CSS solution using some transformation like below
.container
width:300px;
height:300px;
margin:auto;
position:relative;
overflow:hidden;
.container > div
position:absolute;
width:100%;
height:100%;
border-radius:80px;
transform-origin:top left;
transform:translateX(-20%) rotate(-45deg);
overflow:hidden;
.container > div:before
content:"";
position:absolute;
width:calc(100% * 1.4);
height:calc(100% * 1.4);
transform:rotate(45deg);
transform-origin:top left;
background:
linear-gradient(to top,rgba(99, 0, 255, 0.7),#251D4B),
url(https://picsum.photos/300/300?image=1069) top/cover;
<div class="container">
<div></div>
</div>With the container as full width:
.container
margin:auto;
position:relative;
overflow:hidden;
.container > div
width:100%;
padding-top:100%;
border-radius:15%;
transform-origin:top left;
transform:translateY(-15%) translateX(-21%) rotate(-45deg);
overflow:hidden;
.container > div:before
content:"";
position:absolute;
top:0;
left:0;
width:calc(100% * 1.4);
height:calc(100% * 1.4);
transform:rotate(45deg);
transform-origin:top left;
background:
linear-gradient(to top,rgba(99, 0, 255, 0.7),#251D4B),
url(https://picsum.photos/300/300?image=1069) top/cover;
<div class="container">
<div></div>
</div>answered Feb 1 at 15:39
Temani AfifTemani Afif
83k104795
A great solution, however when changing .container to 100% width thats where issues begin to arise
– egr103
Feb 4 at 12:26
@egr103 check the update ;) we can do with 100%
– Temani Afif
Feb 4 at 12:30
OK great, looks good. Just so I can understand, what is width: calc(100% * 1.4); doing on the pseudo element?
– egr103
Feb 4 at 13:03
@egr103 well you can replace it by 140% .. the 1.4 issqrt(2). Chech this if you want more details about the calculation : stackoverflow.com/a/51689026/8620333
– Temani Afif
Feb 4 at 13:10
I understand its a calculation but is it simply to make the image bigger than the container so it covers the shape?
– egr103
Feb 4 at 13:39
|
show 1 more comment
2
I would go with a pure CSS solution using some transformation like below
.container
width:300px;
height:300px;
margin:auto;
position:relative;
overflow:hidden;
.container > div
position:absolute;
width:100%;
height:100%;
border-radius:80px;
transform-origin:top left;
transform:translateX(-20%) rotate(-45deg);
overflow:hidden;
.container > div:before
content:"";
position:absolute;
width:calc(100% * 1.4);
height:calc(100% * 1.4);
transform:rotate(45deg);
transform-origin:top left;
background:
linear-gradient(to top,rgba(99, 0, 255, 0.7),#251D4B),
url(https://picsum.photos/300/300?image=1069) top/cover;
<div class="container">
<div></div>
</div>With the container as full width:
.container
margin:auto;
position:relative;
overflow:hidden;
.container > div
width:100%;
padding-top:100%;
border-radius:15%;
transform-origin:top left;
transform:translateY(-15%) translateX(-21%) rotate(-45deg);
overflow:hidden;
.container > div:before
content:"";
position:absolute;
top:0;
left:0;
width:calc(100% * 1.4);
height:calc(100% * 1.4);
transform:rotate(45deg);
transform-origin:top left;
background:
linear-gradient(to top,rgba(99, 0, 255, 0.7),#251D4B),
url(https://picsum.photos/300/300?image=1069) top/cover;
<div class="container">
<div></div>
</div>answered Feb 1 at 15:39
Temani AfifTemani Afif
83k104795
A great solution, however when changing .container to 100% width thats where issues begin to arise
– egr103
Feb 4 at 12:26
@egr103 check the update ;) we can do with 100%
– Temani Afif
Feb 4 at 12:30
OK great, looks good. Just so I can understand, what is width: calc(100% * 1.4); doing on the pseudo element?
– egr103
Feb 4 at 13:03
@egr103 well you can replace it by 140% .. the 1.4 issqrt(2). Chech this if you want more details about the calculation : stackoverflow.com/a/51689026/8620333
– Temani Afif
Feb 4 at 13:10
I understand its a calculation but is it simply to make the image bigger than the container so it covers the shape?
– egr103
Feb 4 at 13:39
|
show 1 more comment
2
2
2
I would go with a pure CSS solution using some transformation like below
.container
width:300px;
height:300px;
margin:auto;
position:relative;
overflow:hidden;
.container > div
position:absolute;
width:100%;
height:100%;
border-radius:80px;
transform-origin:top left;
transform:translateX(-20%) rotate(-45deg);
overflow:hidden;
.container > div:before
content:"";
position:absolute;
width:calc(100% * 1.4);
height:calc(100% * 1.4);
transform:rotate(45deg);
transform-origin:top left;
background:
linear-gradient(to top,rgba(99, 0, 255, 0.7),#251D4B),
url(https://picsum.photos/300/300?image=1069) top/cover;
<div class="container">
<div></div>
</div>With the container as full width:
.container
margin:auto;
position:relative;
overflow:hidden;
.container > div
width:100%;
padding-top:100%;
border-radius:15%;
transform-origin:top left;
transform:translateY(-15%) translateX(-21%) rotate(-45deg);
overflow:hidden;
.container > div:before
content:"";
position:absolute;
top:0;
left:0;
width:calc(100% * 1.4);
height:calc(100% * 1.4);
transform:rotate(45deg);
transform-origin:top left;
background:
linear-gradient(to top,rgba(99, 0, 255, 0.7),#251D4B),
url(https://picsum.photos/300/300?image=1069) top/cover;
<div class="container">
<div></div>
</div>answered Feb 1 at 15:39
Temani AfifTemani Afif
83k104795
I would go with a pure CSS solution using some transformation like below
.container
width:300px;
height:300px;
margin:auto;
position:relative;
overflow:hidden;
.container > div
position:absolute;
width:100%;
height:100%;
border-radius:80px;
transform-origin:top left;
transform:translateX(-20%) rotate(-45deg);
overflow:hidden;
.container > div:before
content:"";
position:absolute;
width:calc(100% * 1.4);
height:calc(100% * 1.4);
transform:rotate(45deg);
transform-origin:top left;
background:
linear-gradient(to top,rgba(99, 0, 255, 0.7),#251D4B),
url(https://picsum.photos/300/300?image=1069) top/cover;
<div class="container">
<div></div>
</div>With the container as full width:
.container
margin:auto;
position:relative;
overflow:hidden;
.container > div
width:100%;
padding-top:100%;
border-radius:15%;
transform-origin:top left;
transform:translateY(-15%) translateX(-21%) rotate(-45deg);
overflow:hidden;
.container > div:before
content:"";
position:absolute;
top:0;
left:0;
width:calc(100% * 1.4);
height:calc(100% * 1.4);
transform:rotate(45deg);
transform-origin:top left;
background:
linear-gradient(to top,rgba(99, 0, 255, 0.7),#251D4B),
url(https://picsum.photos/300/300?image=1069) top/cover;
<div class="container">
<div></div>
</div>.container
width:300px;
height:300px;
margin:auto;
position:relative;
overflow:hidden;
.container > div
position:absolute;
width:100%;
height:100%;
border-radius:80px;
transform-origin:top left;
transform:translateX(-20%) rotate(-45deg);
overflow:hidden;
.container > div:before
content:"";
position:absolute;
width:calc(100% * 1.4);
height:calc(100% * 1.4);
transform:rotate(45deg);
transform-origin:top left;
background:
linear-gradient(to top,rgba(99, 0, 255, 0.7),#251D4B),
url(https://picsum.photos/300/300?image=1069) top/cover;
<div class="container">
<div></div>
</div>.container
width:300px;
height:300px;
margin:auto;
position:relative;
overflow:hidden;
.container > div
position:absolute;
width:100%;
height:100%;
border-radius:80px;
transform-origin:top left;
transform:translateX(-20%) rotate(-45deg);
overflow:hidden;
.container > div:before
content:"";
position:absolute;
width:calc(100% * 1.4);
height:calc(100% * 1.4);
transform:rotate(45deg);
transform-origin:top left;
background:
linear-gradient(to top,rgba(99, 0, 255, 0.7),#251D4B),
url(https://picsum.photos/300/300?image=1069) top/cover;
<div class="container">
<div></div>
</div>.container
margin:auto;
position:relative;
overflow:hidden;
.container > div
width:100%;
padding-top:100%;
border-radius:15%;
transform-origin:top left;
transform:translateY(-15%) translateX(-21%) rotate(-45deg);
overflow:hidden;
.container > div:before
content:"";
position:absolute;
top:0;
left:0;
width:calc(100% * 1.4);
height:calc(100% * 1.4);
transform:rotate(45deg);
transform-origin:top left;
background:
linear-gradient(to top,rgba(99, 0, 255, 0.7),#251D4B),
url(https://picsum.photos/300/300?image=1069) top/cover;
<div class="container">
<div></div>
</div>.container
margin:auto;
position:relative;
overflow:hidden;
.container > div
width:100%;
padding-top:100%;
border-radius:15%;
transform-origin:top left;
transform:translateY(-15%) translateX(-21%) rotate(-45deg);
overflow:hidden;
.container > div:before
content:"";
position:absolute;
top:0;
left:0;
width:calc(100% * 1.4);
height:calc(100% * 1.4);
transform:rotate(45deg);
transform-origin:top left;
background:
linear-gradient(to top,rgba(99, 0, 255, 0.7),#251D4B),
url(https://picsum.photos/300/300?image=1069) top/cover;
<div class="container">
<div></div>
</div>answered Feb 1 at 15:39
Temani AfifTemani Afif
83k104795
edited Feb 4 at 12:46
answered Feb 1 at 15:39
Temani AfifTemani Afif
83k104795
answered Feb 1 at 15:39
Temani AfifTemani Afif
83k104795
answered Feb 1 at 15:39
Temani AfifTemani Afif
83k104795
83k104795
A great solution, however when changing .container to 100% width thats where issues begin to arise
– egr103
Feb 4 at 12:26
@egr103 check the update ;) we can do with 100%
– Temani Afif
Feb 4 at 12:30
OK great, looks good. Just so I can understand, what is width: calc(100% * 1.4); doing on the pseudo element?
– egr103
Feb 4 at 13:03
@egr103 well you can replace it by 140% .. the 1.4 issqrt(2). Chech this if you want more details about the calculation : stackoverflow.com/a/51689026/8620333
– Temani Afif
Feb 4 at 13:10
I understand its a calculation but is it simply to make the image bigger than the container so it covers the shape?
– egr103
Feb 4 at 13:39
|
show 1 more comment
A great solution, however when changing .container to 100% width thats where issues begin to arise
– egr103
Feb 4 at 12:26
@egr103 check the update ;) we can do with 100%
– Temani Afif
Feb 4 at 12:30
OK great, looks good. Just so I can understand, what is width: calc(100% * 1.4); doing on the pseudo element?
– egr103
Feb 4 at 13:03
@egr103 well you can replace it by 140% .. the 1.4 issqrt(2). Chech this if you want more details about the calculation : stackoverflow.com/a/51689026/8620333
– Temani Afif
Feb 4 at 13:10
I understand its a calculation but is it simply to make the image bigger than the container so it covers the shape?
– egr103
Feb 4 at 13:39
A great solution, however when changing .container to 100% width thats where issues begin to arise
– egr103
Feb 4 at 12:26
A great solution, however when changing .container to 100% width thats where issues begin to arise
– egr103
Feb 4 at 12:26
@egr103 check the update ;) we can do with 100%
– Temani Afif
Feb 4 at 12:30
@egr103 check the update ;) we can do with 100%
– Temani Afif
Feb 4 at 12:30
OK great, looks good. Just so I can understand, what is width: calc(100% * 1.4); doing on the pseudo element?
– egr103
Feb 4 at 13:03
OK great, looks good. Just so I can understand, what is width: calc(100% * 1.4); doing on the pseudo element?
– egr103
Feb 4 at 13:03
@egr103 well you can replace it by 140% .. the 1.4 is
sqrt(2). Chech this if you want more details about the calculation : stackoverflow.com/a/51689026/8620333– Temani Afif
Feb 4 at 13:10
@egr103 well you can replace it by 140% .. the 1.4 is
sqrt(2). Chech this if you want more details about the calculation : stackoverflow.com/a/51689026/8620333– Temani Afif
Feb 4 at 13:10
I understand its a calculation but is it simply to make the image bigger than the container so it covers the shape?
– egr103
Feb 4 at 13:39
I understand its a calculation but is it simply to make the image bigger than the container so it covers the shape?
– egr103
Feb 4 at 13:39
|
show 1 more comment
1
Use the <path> as a <mask>. Then use that <mask> on a your <image>, then use that same <mask> on a <rect> that sits on top. Finally fill the <rect> with your <gradient>.
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 800">
<defs>
<linearGradient x1="100%" y1="50%" x2="0%" y2="50%" id="gradient">
<stop stop-color="#6300FF" stop-opacity="0.7" offset="0%"></stop>
<stop stop-color="#251D4B" offset="100%"></stop>
</linearGradient>
<mask id="mask">
<path d="M812.532 489.667L1306.8 -4.60034H-106L388.268 489.667C505.425 606.825 695.374 606.825 812.532 489.667Z" fill="#C4C4C4"/>
</mask>
</defs>
<image xlink:href="https://upload.wikimedia.org/wikipedia/commons/1/11/Varkala_Beach_High_Res.jpg" x="0" y="0" width="1200" height="800" mask="url(#mask)" />
<rect width="1400" height="742" mask="url(#mask)" fill="url(#gradient)"></rect>
</svg>answered Feb 1 at 16:09
ksavksav
5,47421433
1
A great solution, however a pure css solution, although not what I asked for was a bonus that worked perfectly for my scenario.
– egr103
Feb 4 at 13:55
add a comment |
1
Use the <path> as a <mask>. Then use that <mask> on a your <image>, then use that same <mask> on a <rect> that sits on top. Finally fill the <rect> with your <gradient>.
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 800">
<defs>
<linearGradient x1="100%" y1="50%" x2="0%" y2="50%" id="gradient">
<stop stop-color="#6300FF" stop-opacity="0.7" offset="0%"></stop>
<stop stop-color="#251D4B" offset="100%"></stop>
</linearGradient>
<mask id="mask">
<path d="M812.532 489.667L1306.8 -4.60034H-106L388.268 489.667C505.425 606.825 695.374 606.825 812.532 489.667Z" fill="#C4C4C4"/>
</mask>
</defs>
<image xlink:href="https://upload.wikimedia.org/wikipedia/commons/1/11/Varkala_Beach_High_Res.jpg" x="0" y="0" width="1200" height="800" mask="url(#mask)" />
<rect width="1400" height="742" mask="url(#mask)" fill="url(#gradient)"></rect>
</svg>answered Feb 1 at 16:09
ksavksav
5,47421433
1
A great solution, however a pure css solution, although not what I asked for was a bonus that worked perfectly for my scenario.
– egr103
Feb 4 at 13:55
add a comment |
1
1
1
Use the <path> as a <mask>. Then use that <mask> on a your <image>, then use that same <mask> on a <rect> that sits on top. Finally fill the <rect> with your <gradient>.
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 800">
<defs>
<linearGradient x1="100%" y1="50%" x2="0%" y2="50%" id="gradient">
<stop stop-color="#6300FF" stop-opacity="0.7" offset="0%"></stop>
<stop stop-color="#251D4B" offset="100%"></stop>
</linearGradient>
<mask id="mask">
<path d="M812.532 489.667L1306.8 -4.60034H-106L388.268 489.667C505.425 606.825 695.374 606.825 812.532 489.667Z" fill="#C4C4C4"/>
</mask>
</defs>
<image xlink:href="https://upload.wikimedia.org/wikipedia/commons/1/11/Varkala_Beach_High_Res.jpg" x="0" y="0" width="1200" height="800" mask="url(#mask)" />
<rect width="1400" height="742" mask="url(#mask)" fill="url(#gradient)"></rect>
</svg>answered Feb 1 at 16:09
ksavksav
5,47421433
Use the <path> as a <mask>. Then use that <mask> on a your <image>, then use that same <mask> on a <rect> that sits on top. Finally fill the <rect> with your <gradient>.
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 800">
<defs>
<linearGradient x1="100%" y1="50%" x2="0%" y2="50%" id="gradient">
<stop stop-color="#6300FF" stop-opacity="0.7" offset="0%"></stop>
<stop stop-color="#251D4B" offset="100%"></stop>
</linearGradient>
<mask id="mask">
<path d="M812.532 489.667L1306.8 -4.60034H-106L388.268 489.667C505.425 606.825 695.374 606.825 812.532 489.667Z" fill="#C4C4C4"/>
</mask>
</defs>
<image xlink:href="https://upload.wikimedia.org/wikipedia/commons/1/11/Varkala_Beach_High_Res.jpg" x="0" y="0" width="1200" height="800" mask="url(#mask)" />
<rect width="1400" height="742" mask="url(#mask)" fill="url(#gradient)"></rect>
</svg><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 800">
<defs>
<linearGradient x1="100%" y1="50%" x2="0%" y2="50%" id="gradient">
<stop stop-color="#6300FF" stop-opacity="0.7" offset="0%"></stop>
<stop stop-color="#251D4B" offset="100%"></stop>
</linearGradient>
<mask id="mask">
<path d="M812.532 489.667L1306.8 -4.60034H-106L388.268 489.667C505.425 606.825 695.374 606.825 812.532 489.667Z" fill="#C4C4C4"/>
</mask>
</defs>
<image xlink:href="https://upload.wikimedia.org/wikipedia/commons/1/11/Varkala_Beach_High_Res.jpg" x="0" y="0" width="1200" height="800" mask="url(#mask)" />
<rect width="1400" height="742" mask="url(#mask)" fill="url(#gradient)"></rect>
</svg><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 800">
<defs>
<linearGradient x1="100%" y1="50%" x2="0%" y2="50%" id="gradient">
<stop stop-color="#6300FF" stop-opacity="0.7" offset="0%"></stop>
<stop stop-color="#251D4B" offset="100%"></stop>
</linearGradient>
<mask id="mask">
<path d="M812.532 489.667L1306.8 -4.60034H-106L388.268 489.667C505.425 606.825 695.374 606.825 812.532 489.667Z" fill="#C4C4C4"/>
</mask>
</defs>
<image xlink:href="https://upload.wikimedia.org/wikipedia/commons/1/11/Varkala_Beach_High_Res.jpg" x="0" y="0" width="1200" height="800" mask="url(#mask)" />
<rect width="1400" height="742" mask="url(#mask)" fill="url(#gradient)"></rect>
</svg>answered Feb 1 at 16:09
ksavksav
5,47421433
answered Feb 1 at 16:09
ksavksav
5,47421433
answered Feb 1 at 16:09
ksavksav
5,47421433
answered Feb 1 at 16:09
ksavksav
5,47421433
5,47421433
1
A great solution, however a pure css solution, although not what I asked for was a bonus that worked perfectly for my scenario.
– egr103
Feb 4 at 13:55
add a comment |
1
A great solution, however a pure css solution, although not what I asked for was a bonus that worked perfectly for my scenario.
– egr103
Feb 4 at 13:55
1
1
A great solution, however a pure css solution, although not what I asked for was a bonus that worked perfectly for my scenario.
– egr103
Feb 4 at 13:55
A great solution, however a pure css solution, although not what I asked for was a bonus that worked perfectly for my scenario.
– egr103
Feb 4 at 13:55
add a comment |
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54482351%2fsvg-rounded-triangle-with-gradient-overlay-and-background-image%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
