添加邊框與頂級三角

我想添加邊框與頂級三角股利的div添加邊框與頂級三角

問題是邊界不獲取應用到三角形部分

body { 
 
    background-color: #F3F5F6; 
 
} 
 
.info-panel { 
 
    display: block; 
 
    position: relative; 
 
    background: #FFFFFF; 
 
    padding: 15px; 
 
    border: 1px solid #DDDDDD; 
 
    margin-top: 20px; 
 
} 
 
.info-panel:after { 
 
    content: ''; 
 
    display: block; 
 
    position: absolute; 
 
    left: 20px; 
 
    bottom: 100%; 
 
    width: 0; 
 
    height: 0; 
 
    border-bottom: 10px solid #FFFFFF; 
 
    border-top: 10px solid transparent; 
 
    border-left: 10px solid transparent; 
 
    border-right: 10px solid transparent; 
 
}

<div class="info-panel"> 
 
    Testing 
 
</div>

我不想添加一個CSS框陰影。

我需要一個邊框。

jsFiddle

來源

2016-11-09 Jordyn

其實，「三角部位」是一個邊界本身，這就是爲什麼你不能一個CSS邊框應用到它，但是有一個解決方法。

使用:before僞元素創建另一個比第一個更大的三角形，並將邊框顏色應用到它。

.info-panel { 
 
    display: block; 
 
    position: relative; 
 
    background: #FFFFFF; 
 
    padding: 15px; 
 
    border: 1px solid #DDDDDD; 
 
    margin-top: 20px; 
 
} 
 
.info-panel:before, .info-panel:after { 
 
    content: ''; 
 
    display: block; 
 
    position: absolute; 
 
    bottom: 100%; 
 
    width: 0; 
 
    height: 0; 
 
} 
 
.info-panel:before { 
 
    left: 19px; 
 
    border: 11px solid transparent; 
 
    border-bottom-color: #ddd; 
 
} 
 
.info-panel:after { 
 
    left: 20px; 
 
    border: 10px solid transparent; 
 
    border-bottom-color: #fff; 
 
}

<div class="info-panel"> 
 
    Testing 
 
</div>

來源

2016-11-09 18:06:47 5aledmaged

感謝你多少調整奇蹟般有效。 – Jordyn

剛起飛就這個

.info-panel:after { 
    border-bottom-color: #FFFFFF; 
}

這是壓倒一切的邊境綠色。

檢查這個片段

.info-panel { 
 
    display: block; 
 
    position: relative; 
 
    background: #FFFFFF; 
 
    padding: 15px; 
 
    border: 1px solid #DDDDDD; 
 
    margin-top: 20px; 
 
} 
 
.info-panel:before { 
 
    border: 1px solid #DDDDDD; 
 
} 
 
.info-panel:after { 
 
    content: ''; 
 
    display: block; 
 
    position: absolute; 
 
    left: 20px; 
 
    bottom: 100%; 
 
    width: 0; 
 
    height: 0; 
 
    border-bottom: 10px solid green; 
 
    border-top: 10px solid transparent; 
 
    border-left: 10px solid transparent; 
 
    border-right: 10px solid transparent; 
 
}

<div class="info-panel"> 
 
    Testing 
 
</div>

希望它可以幫助

來源

2016-11-09 18:02:23 Geeky

我很抱歉，是我的錯，但我真正想要的是我的灰色邊框來繞去的三角形就像在其他地方 – Jordyn

可以實現與fontAwesome。見我的例子，並根據需要

.info-panel { 
 
    \t display: block; 
 
    \t position: relative; 
 
    \t background: #FFFFFF; 
 
    \t padding: 15px; 
 
    \t border:1px solid #DDDDDD; 
 
    \t margin-top:20px; 
 
    } 
 
    
 
    .info-panel:after, .info-panel:before { 
 
    \t content: '\f0d8'; 
 
     font-family: fontAwesome; 
 
    \t display: block; 
 
    \t position: absolute; 
 
     font-size: 36px; 
 
    \t left: 20px; 
 
    \t bottom: 100%; 
 
     top: -22px; 
 
    \t width: 0; 
 
    \t height: 0; 
 
     color: #ccc; /* should be your desired border color */ 
 
    
 
    } 
 
    
 
    .info-panel:before { 
 
    color: white; 
 
    z-index: 2; 
 
    top: -21px; 
 
    }

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet"/> 
 
<div class="info-panel"> 
 
    Testing 
 
</div>

來源

2016-11-09 18:09:14

添加邊框與頂級三角

回答

相關問題