小三角如何实现--css-before-after

最新推荐文章于 2025-06-21 09:15:59 发布

原创最新推荐文章于 2025-06-21 09:15:59 发布 · 3.6k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#css #小三角

Css 专栏收录该内容

19 篇文章

订阅专栏

小三角通过css实现，主要通过一下两行代码实现，border-right则小三角朝左，若想要朝右，则border-left

border: solid transparent; border-right-color:#D2D6DC;

具体代码如下：

首先一个说话框：（.right是为了区分小三角的朝向）

.right .direct-chat-text {
    margin-right: 50px;
    margin-left: 0;
 }
 .direct-chat-text {
    border-radius: 5px;
    position: relative;
    padding: 5px 10px;
    background: #d2d6de;
    border: 1px solid #d2d6de;
    margin: 5px 0 0 50px;
    color: #444;
}
.right>.direct-chat-text {
    background: #f39c12;
    border-color: #f39c12;
    color: #fff;
}

下面是before以及after的css

.right .direct-chat-text:before,.right .direct-chat-text:after{
	right:auto;
	left:100%;
}
.direct-chat-text:before,.direct-chat-text:after{
	position: absolute;
	right: 100%;
	border: solid transparent;
	border-left-color:#D2D6DC;
	content: '';
	width: 0;
	height: 0;
}
.direct-chat-text:before {
	border-width: 6px;
	margin-top: -6px;
}
.direct-chat-text:after {
	border-width: 6px;
	margin-top: 15px;
}

html代码如下：

<div class="right">
	<div class="direct-chat-text">
		You better beliece it!
	</div>
</div>

相应的其他操作，可以对css进行修改