CSS三角形的背景圖像

如何創建與背景圖案的三角形元素？

例如，我需要這樣的DIV：

enter image description here

但我的狀態是這樣的：

enter image description here

與三角形元素的所有例子都使用它不能有一個IMG的邊界在那...。

這是我需要coolarrow的分部類：

<div class="subsection"><span>Ryan Gosling, Mr Landlord</span></div> 

.subsection { 
    .box-shadow (0, -1px, 1px, 0, rgba(0, 0, 0, 0.3)); 
    background: url('/assets/pattern-lorem.png'); // The inner part of the slider have the pattern 
    display: block; 
    clear: both; 
    float: left; 
    width: 100%; 
    padding-top: 15px; 
    padding-bottom: 15px; 
    display: none; 
} 
.subsection { 
    position:relative; 
} 
.subsection:before { 
    content:''; 
    position:absolute; 
    top:0; 
    left:0; 
    height:20px; 
    width:0; 
    border-left:20px solid white; 
    border-bottom:16px solid transparent; 
} 
.subsection:after { 
    content:''; 
    position:absolute; 
    top:36px; 
    left:0; 
    bottom:0; 
    width:0; 
    border-left:20px solid white; 
    border-top:16px solid transparent; 
}

並即時得到：

enter image description here

這很好......我怎麼能帶來的箭頭頂在需要的形式？ ...並覆蓋案例div？ ... 謝謝。

來源

2013-07-17 SkyKOG

我認爲這個問題回答過類似的問題 http://stackoverflow.com/questions/11379085/make-a-css-triangle-with-transparent-background-on-a-div-with-white-bg-image?rq=1 – matthiasgh

不，它不是一個複製....需要有形狀的圖像，但與圖像背景...不wi th從邊界輸入的顏色.... – SkyKOG

你會考慮使用SVG而不是CSS嗎？它可能更容易。 – Spudley

如果你不喜歡跨瀏覽器兼容，你可以用你旋轉45度一個僞元素，並附加樣式它。你需要另外將是背景的唯一的事，旋轉（回）由45deg附加到僞元素：

div.coolarrow:before { 
    content: ''; 
    position: absolute; 
    z-index: -1; 
    top: -24.7px; 
    left: 10px; 
    background-color: #bada55; 
    width: 50px; 
    height: 50px; 

    background: url(url/to/your/45deg/rotated/background.gif); 

    box-shadow: inset 0 0 10px #000000; 
    transform: rotate(45deg); 
}

這裏是一個簡短的小提琴來說明（無背景）：
Fiddle

爲了解決其他情況，但90度的箭頭，你需要扭曲rect另外。我真的不知道是什麼，然後與背景圖像會發生......

來源

2013-07-17 14:44:04 nirazul

謝謝...請參閱我的更新....我從你的想法.... – SkyKOG

將圖片作爲div的背景，並將邊距的負值放到條上。例子（雖然估計，我絕不會聲稱這個工作）將是margin-left：-20px; margin-top：-20px;並在線後。

或者去@ Py的答案，你可以使用這個CSS的箭頭，並做相同的負邊界，使其排隊。

#triangle-up { width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 100px solid red; margin-left: -20px; margin-top: -20px; }

來源

2013-07-17 14:36:48

謝謝...請參閱我的更新.... – SkyKOG

爲了將它帶到頂部，在箭頭div的CSS類中添加了「margin-top：-10px」（將10更改爲適合您的需求）。 – 2013-07-17 15:20:14

沒有箭頭類了......使用僞元素之前和之後...我發佈了整個CSS ...你可以看到請...謝謝 – SkyKOG

去http://apps.eky.hk/css-triangle-generator/和產生它：d

#triangle { 
    width: 0; 
    height: 0; 
    border-bottom: 120px solid green; 
    border-left: 60px solid transparent; 
    border-right: 60px solid transparent; 
}

來源

2013-07-17 14:49:13

CSS三角形的背景圖像

回答

相關問題