帶底線的CSS3三角形

是否可以使用如下所述的CSS3？帶底線的CSS3三角形

enter image description here

（三角形在中間，左側和三角形的右側具有在底部線）。

請指教我。

來源

2014-01-08 Naju

這些是克拉（^）和連字符（ - ）的符號？然後** -^- **它可以寫入沒有CSS。你能解釋更多嗎？ – KunJ

@KunJ我已經更新了圖片。 – Naju

請看我對此的回答。 – KunJ

HTML：

<div class="arrow"></div> 
<div class="line"></div>

CSS：

.arrow { 
    height: 0; 
    width: 0; 
    border-bottom: 8px solid #FF0000; 
    border-left: 16px dotted transparent; 
    border-right: 16px dotted transparent; 
    left: 0px; 
    top: 2px; 
    margin-left: 20px; 
    z-index: 1; 
    position: relative; 
} 
.line { 
    width: 200px; 
    height: 2px; 
    background: #FF0000; 
}

不完全是在尺寸相同的，但您可以編輯和創建這樣的。

編輯：對於你的新造型，加上低於CSS和HTML：

CSS：

.fill { 
    position: relative; 
    left: -14px; 
    top: 2px; 
    height: 0; 
    width: 0; 
    border-bottom: 6px solid #ffffff; 
    border-left: 14px dotted transparent; 
    border-right: 14px dotted transparent; 
    z-index: 2; 
}

HTML：

<div class="arrow"> 
    <div class="fill"></div> 
</div> 
<div class="line"></div>

來源

2014-01-08 06:24:45 KunJ

非常感謝。 – Naju

歡迎:) – KunJ

如果你需要身後的背景三角形要透明：

HTML：

<div class="line-separator"> 
    <div class="side-line"> </div> 
    <div class="triangle"> </div> 
    <div class="side-line"> </div> 
</div>

CSS：

.side-line { 
    display: inline-block; 
    border-top: 1px solid black; 
    width: 20%; 
} 

.triangle { 
    display: inline-block; 
    height: 7px; 
    width: 7px; 
    transform: rotate(45deg); 
    transform-origin: center center; 
    border-top: 1px solid black; 
    border-left: 1px solid black; 
    margin-left: -3px; 
    margin-right: -3px; 
    margin-bottom: -3px; 
}

現場演示： http://jsfiddle.net/85saaphw/

來源

2015-11-19 09:50:59 itaya

帶底線的CSS3三角形

回答

相關問題