三角形的邊框圖像漸變圖案

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>