3
這裏是正在發生的事情:CSS三角形有沒有點
CSS:
.speech-box {
height:76px;
width:220px;
padding:6px 10px;
background-image: linear-gradient(#4f4f4f,#000);
}
.speech-box:before {
content:'';
width: 0;
height: 0;
border-top: 5px solid transparent;
border-bottom: 5px solid transparent;
border-right:5px solid #4f4f4f;
position:relative;
left:-15px;
top:-3px;
}
而我的HTML:
<div class="speech-box">
<span class="speech"></span>
</div>
這裏是一個小提琴:http://jsfiddle.net/xqy4dLbc/
我猜測問題出在我的HTML上?
非常優雅的解決方案和富有洞察力的解釋:upvoted! – 2014-11-23 18:46:43
嗨,感謝分享!唯一的問題是箭頭現在佔據了空間並且撞上了我的文本。 http://jsfiddle.net/xqy4dLbc/4/你會建議如何解決/避免這個問題?我需要確定它的位置嗎? – Drewdavid 2014-11-23 22:15:12
@Drewdavid是的,你可以使用'position:absolute':http://jsfiddle.net/xqy4dLbc/5/注意到parent的'position:relative;',你不需要'display:block'' 。 – 2014-11-24 08:00:45