SVG圆角三角形，带有渐变叠加和背景图像 [英] SVG rounded triangle with gradient overlay and background image

问题描述

我有以下代码，用于创建带有紫色渐变的简单圆角三角形.我正在尝试插入一个背景图片，该图片将填充渐变下面的形状，以创建与以下屏幕截图类似的效果:

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:

我要实现的目标:

到目前为止，我的代码(未显示图片):

 <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解决方案

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>

将容器设为完整宽度:

.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>

这篇关于SVG圆角三角形，带有渐变叠加和背景图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！