CSS三角形有没有点

Stubby triangle!

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上？

来源

2014-11-23 Drewdavid

您需要

display:block;

或

display:inline-block;

添加到.speech-box:before：

DEMO

伪元素的默认显示属性为inline（see MDN），并且您不能在内联元素上设置高度。因此您设置的height:0;不适用。

来源

2014-11-23 18:35:13

非常优雅的解决方案和富有洞察力的解释：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

CSS三角形有没有点

回答

相关问题