三角形的边框图像渐变图案

Question

我想用css创建一个奇形的三角形。我的第一个想法是使用透明边框与transform: rotate，它的工作（见左三角）。现在我想使用渐变边框图像作为同一个三角形的背景，但我无法使其工作。我尝试了很多东西，如更换border-width，使用包装和overflow:hidden等，没有任何工作。在这里，我发布了其中一个尝试（请参阅右侧形状），因为您看到该模式占用了所有空间，而不是遵循三角形形状。有任何想法吗？

#top-left { 
 
    position:absolute; 
 
    left:78px; 
 
    width: 0; 
 
    height: 0; 
 
    border-top: 100px solid transparent; 
 
    border-right: 80px solid black; 
 
    border-bottom: 50px solid transparent; 
 
    -webkit-transform: rotate(-20deg); 
 
} 
 

 
#top-right { 
 
    position:absolute; 
 
    left:300px; 
 
    width: 0; 
 
    height: 0; 
 
    border-image: repeating-linear-gradient(0deg, pink, pink 1%, purple 1%, purple 8%) 10; 
 
    border-image-width: 100px 80px 50px 0px; 
 
    border-width: 100px 80px 50px 0px; 
 
    border-style: solid; 
 
    -webkit-transform: rotate(-20deg); 
 
}

<div id="wrapper"> 
 
<div id="top-left"></div> 
 
<div id="top-right"></div> 
 
</div>

编辑：安德烈·费奥多罗夫的回答是不错的，但有一个问题，当背景不是纯色，像这样的例子：

body{ 
 
background-color: #6d695c; 
 
background-image: 
 
repeating-linear-gradient(120deg, rgba(255,255,255,.1), rgba(255,255,255,.1) 1px, transparent 1px, transparent 60px), 
 
repeating-linear-gradient(60deg, rgba(255,255,255,.1), rgba(255,255,255,.1) 1px, transparent 1px, transparent 60px), 
 
linear-gradient(60deg, rgba(0,0,0,.1) 25%, transparent 25%, transparent 75%, rgba(0,0,0,.1) 75%, rgba(0,0,0,.1)), 
 
linear-gradient(120deg, rgba(0,0,0,.1) 25%, transparent 25%, transparent 75%, rgba(0,0,0,.1) 75%, rgba(0,0,0,.1)); 
 
background-size: 70px 120px; 
 
} 
 
#wrapper { 
 
    position: relative; 
 
} 
 

 
#top-left { 
 
    position:absolute; 
 
    left:0px; 
 
\t width: 0; 
 
\t height: 0; 
 
\t border-top: 100px solid #fff; 
 
\t border-right: 80px solid transparent; 
 
\t border-bottom: 50px solid #fff; 
 
    -webkit-transform: rotate(-20deg); 
 
} 
 

 
#top-right { 
 
    position:absolute; 
 
    z-index: -10; 
 
    left:0; 
 
    width: 0; 
 
    height: 0; 
 
    border-image: repeating-linear-gradient(0deg, pink, pink 1%, purple 1%, purple 8%) 10; 
 
    border-image-width: 100px 80px 50px 0px; 
 
    border-width: 100px 80px 50px 0px; 
 
    border-style: solid; 
 
    -webkit-transform: rotate(-20deg); 
 
}

<div id="wrapper"> 
 
<div id="top-left"></div> 
 
<div id="top-right"></div> 
 
</div>

Answer 1

您仍然可以使用linear-gradient与no-repeat和background-size绘制每个片的边界：通过从步骤

例子单个标签：

/* testing gradients */ 
 
p , div#wrapper { 
 
    width:80px; 
 
    float:left; 
 
    margin:1em; 
 
    height:150px; 
 
    /* see me then remove this shadow */ 
 
    box-shadow:0 0 0 2px; 
 
} 
 
p { 
 
    background: 
 
    linear-gradient(130deg, transparent 49.75%, pink 50.5%) 0 42px no-repeat ; 
 
    background-size: 
 
    100% 15px; 
 
    transform: rotate(-20deg); 
 
} 
 
p + p{ 
 
    background: 
 
    linear-gradient(130deg, transparent 49.75%, pink 50.5%) 0 42px no-repeat , 
 
    linear-gradient(130deg,transparent 62px, purple 63px) top no-repeat; 
 
    background-size: 
 
    100% 15px, 
 
    100% 65%; 
 
} 
 
p + p + p { 
 
    
 
    background: 
 
    linear-gradient(130deg, transparent 49.75%, pink 50.5%) 0 42px no-repeat , 
 
    linear-gradient(130deg,transparent 62px, purple 63px) top no-repeat, 
 
    linear-gradient(33deg , transparent 42px, pink 43px) no-repeat bottom; 
 
    background-size: 
 
    100% 15px, 
 
    100% 65%, 
 
    100% 8px; 
 
} 
 
p+ p + p + p { 
 
    background: 
 
    linear-gradient(130deg, transparent 49.75%, pink 50.5%) 0 42px no-repeat , 
 
    linear-gradient(130deg,transparent 62px, purple 63px) top no-repeat, 
 
    linear-gradient(33deg , transparent 42px, pink 43px) no-repeat bottom, 
 
    linear-gradient(33deg, transparent 42px, purple 43px) bottom no-repeat; 
 
    background-size: 
 
    100% 15px, 
 
    100% 65%, 
 
    100% 8px, 
 
    100% 35.5%; 
 
    } 
 
p:last-of-type{ 
 
    box-shadow:0 0 
 
} 
 

 
/* your original CSS/issue */ 
 
body{ 
 
background-color: #6d695c; 
 
background-image: 
 
repeating-linear-gradient(120deg, rgba(255,255,255,.1), rgba(255,255,255,.1) 1px, transparent 1px, transparent 60px), 
 
repeating-linear-gradient(60deg, rgba(255,255,255,.1), rgba(255,255,255,.1) 1px, transparent 1px, transparent 60px), 
 
linear-gradient(60deg, rgba(0,0,0,.1) 25%, transparent 25%, transparent 75%, rgba(0,0,0,.1) 75%, rgba(0,0,0,.1)), 
 
linear-gradient(120deg, rgba(0,0,0,.1) 25%, transparent 25%, transparent 75%, rgba(0,0,0,.1) 75%, rgba(0,0,0,.1)); 
 
background-size: 70px 120px; 
 
} 
 
#wrapper { 
 
    position: relative; 
 
} 
 

 
#top-left { 
 
    position:absolute; 
 
    left:0px; 
 
\t width: 0; 
 
\t height: 0; 
 
\t border-top: 100px solid #fff; 
 
\t border-right: 80px solid transparent; 
 
\t border-bottom: 50px solid #fff; 
 
    -webkit-transform: rotate(-20deg); 
 
    transform: rotate(-20deg); 
 
} 
 

 
#top-right { 
 
    position:absolute; 
 
    z-index: -10; 
 
    left:0; 
 
    width: 0; 
 
    height: 0; 
 
    border-image: repeating-linear-gradient(0deg, pink, pink 1%, purple 1%, purple 8%) 10; 
 
    border-image-width: 100px 80px 50px 0px; 
 
    border-width: 100px 80px 50px 0px; 
 
    border-style: solid; 
 
    -webkit-transform: rotate(-20deg); 
 
    transform: rotate(-20deg); 
 
}

<!-- your issue --> 
 
<div id="wrapper"> 
 
<div id="top-left"></div> 
 
<div id="top-right"></div> 
 
</div> 
 
<!-- p for testing purpose --> 
 
<p></p> 
 
<p></p> 
 
<p></p> 
 
<p></p> 
 
<p></p>

inbricated元素+梯度&变换可以做太多：

body{ 
 
background-color: #6d695c; 
 
background-image: 
 
repeating-linear-gradient(120deg, rgba(255,255,255,.1), rgba(255,255,255,.1) 1px, transparent 1px, transparent 60px), 
 
repeating-linear-gradient(60deg, rgba(255,255,255,.1), rgba(255,255,255,.1) 1px, transparent 1px, transparent 60px), 
 
linear-gradient(60deg, rgba(0,0,0,.1) 25%, transparent 25%, transparent 75%, rgba(0,0,0,.1) 75%, rgba(0,0,0,.1)), 
 
linear-gradient(120deg, rgba(0,0,0,.1) 25%, transparent 25%, transparent 75%, rgba(0,0,0,.1) 75%, rgba(0,0,0,.1)); 
 
background-size: 70px 120px; 
 
} 
 

 
div.inbricate { 
 
    margin:1em; 
 
    height:150px; 
 
    width:80px; 
 
    position:relative; 
 
    overflow:hidden; 
 
    transform:rotate(-20deg); 
 
    box-shadow: 0 0 ; 
 
} 
 
.inbricate div { 
 
    transform:rotate(31deg) scale(1.2, 0.9) skew(-5deg); 
 
    transform-origin: 100% 102%; 
 
    height:100%; 
 
    background:linear-gradient(-40deg, pink 8%, purple 8%, purple 65%, pink 65%, pink 75%, purple 75%) 
 
}

<div class=inbricate> 
 
    <div> 
 
    </div> 
 
</div>

Answer 2

一个可能的解决方案离子是这样的：

• 把两个形状放在同一个地方。
• 使用z-index使一个与模式去后面的其他
• 使用白色（或任何颜色形状背景）画的三角形之外的边境地区。
• 使透明是有三角形颜色

#wrapper { 
 
    position: relative; 
 
    } 
 

 
#top-left { 
 
    position:absolute; 
 
    left:0px; 
 
\t width: 0; 
 
\t height: 0; 
 
\t border-top: 100px solid #fff; 
 
\t border-right: 80px solid transparent; 
 
\t border-bottom: 50px solid #fff; 
 
    -webkit-transform: rotate(-20deg); 
 
} 
 

 
#top-right { 
 
    position:absolute; 
 
    z-index: -10; 
 
    left:0; 
 
    width: 0; 
 
    height: 0; 
 
    border-image: repeating-linear-gradient(0deg, pink, pink 1%, purple 1%, purple 8%) 10; 
 
    border-image-width: 100px 80px 50px 0px; 
 
    border-width: 100px 80px 50px 0px; 
 
    border-style: solid; 
 
    -webkit-transform: rotate(-20deg); 
 
}

<div id="wrapper"> 
 
<div id="top-left"></div> 
 
<div id="top-right"></div> 
 
</div>