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

来源：互联网发布：淘宝和拍拍网的区别编辑：程序博客网时间：2024/05/18 09:55

小三角通过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进行修改

0 0