用css实现聊天对话框向上小三角效果

最新推荐文章于 2024-01-24 06:30:00 发布

lilly呀

最新推荐文章于 2024-01-24 06:30:00 发布

阅读量1.6k

点赞数 1

分类专栏： CSS布局文章标签： css实现向上对话框

本文链接：https://blog.csdn.net/qq_26780317/article/details/113523064

版权

CSS布局专栏收录该内容

13 篇文章 0 订阅

订阅专栏

背景：有时候，我们会遇到用CSS设计对话框效果的样式，我们可以用CSS设计出对话框的尖角效果。

一、尖角效果的实现原理

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
div{
    display:block;
    width:0px;
    height:0px;
    border-top:25px solid blue;
    border-bottom: 25px solid red;
    border-left: 25px solid #ccc;
    border-right: 25px solid green;
    background-color: green;
}
</style>
</head>
<body>
    <div></div>
</body>
</html>

先设计一个div让四周的border都具有一定大小和颜色。

如果我们要的是最左边的那个小三角形，那如何去掉其他的三角形呢？

很简单：把不需要的border颜色设置成透明色的就可以了。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
div{
    display:block;
    width:0px;
    height:0px;
    border-top:25px solid rgba(0,0,0,0);
    border-bottom:25px solid rgba(0,0,0,0);
    border-left:25px solid #ccc;
    border-right:25px solid rgba(0,0,0,0);
    border-color:none;
}
</style>
</head>
<body>
    <div></div>
</body>
</html>

这样小三角就设计完了，知道原理以后，我们做那种三角，对话框都轻而易举了。

二、实例运用

<div class="main_triangle">
        保险金作为遗产继承时，法定继承人按照第一顺序继承人。。。。
</div>
<div class="main_triangle2"></div>

实例运用的三角，如下图只有线框，那么用两个三角叠加就可以了，第二个三角用透明色覆盖到第一个三角上面即可。

.main_triangle{
  background-color: #ffffff;
  margin: 0 16px;
  padding:10px;
  border-radius: 4px;
  border: 1px solid #EF8A3D;
  line-height: 16px;
  position: relative;
  flex: 1;
  font-size: 12px;
  color: #EF8A3D;
  background: #FEF5F1;
}
.main_triangle::before{
  content:" ";
  border-left: 10px solid transparent;
  border-right:10px solid transparent;
  border-bottom:10px solid #EF8A3D;
  position: absolute;
  left: 140px;
  top: -10px;
}
.main_triangle2{
  position: relative;
}
.main_triangle2::before{
  content:" ";
  border-left: 10px solid transparent;
  border-right:10px solid transparent;
  border-bottom:10px solid #FFFEF5F1;
  position: absolute;
  left: 157px;
  top: -77px;
}
@media screen and (max-width: 350px) {
  .main_triangle::before{
    left: 130px;
  }
  .main_triangle2::before{
    left: 147px;
  }
}

lilly呀

关注

1
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
用css实现聊天对话框向上小三角效果

背景：有时候，我们会遇到用CSS设计对话框效果的样式，我们可以用CSS设计出对话框的尖角效果。一、尖角效果的实现原理<!DOCTYPE html><html><head><meta charset="utf-8"><style>div{ display:block; width:0px; height:0px; border-top:25px solid blue; border-bott
复制链接

扫一扫