【前端html+css】纯css实现带小三角的方形对话框样式

Absolute小白

已于 2022-12-15 11:22:19 修改

阅读量1.1k

点赞数 2

文章标签： css 前端 html

于 2022-12-13 09:48:57 首次发布

本文链接：https://blog.csdn.net/qq_46057971/article/details/128296999

版权

最终样式如下：

首先编写div

<div class="aasd " style="text-align: left;padding-left: 15px;">
    <span >
      aaaaaaaaa</span>
  </div>

其次边框定义

   .aasd {
      position: relative;
      border: 2px solid pink;
      margin: 20px auto;
      width: 246px;
      height: 83px;
      line-height: 43px;
      color: white;
      text-align: center;
      border-radius: 10px;
      font-family: sans-serif;
    }

接下来就是实现三角形

主要是用border-color可以吧一个方形分成上下左右四个三角形

barder-color的transparent是继承父类颜色

所以我们只用这样

    .aasd:before {
      content: '';
      width: 0;
      height: 0;
      border: 20px solid;
      position: absolute;
      top: 83px;
      right: 150px;
      border-color: pink transparent transparent;
    }

如果要实现中间挖空可以写一个after覆盖一点原来的before

   .aasd:after {
      content: '';
      width: 0;
      height: 0;
      border: 20px solid;
      position: absolute;
      top: 80px;
      right: 150px;
      border-color: white transparent transparent;
    }

全部代码

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>Test</title>
  <style>
    .aasd {
      position: relative;
      border: 2px solid pink;
      margin: 20px auto;
      width: 246px;
      height: 83px;
      line-height: 43px;
      color: white;
      text-align: center;
      border-radius: 10px;
      font-family: sans-serif;
    }

    .aasd:before {
      content: '';
      width: 0;
      height: 0;
      border: 20px solid;
      position: absolute;
      top: 83px;
      right: 150px;
      border-color: pink transparent transparent;
    }


    .aasd:after {
      content: '';
      width: 0;
      height: 0;
      border: 20px solid;
      position: absolute;
      top: 80px;
      right: 150px;
      border-color: white transparent transparent;
    }
    .aasd span{
      font-size: 18px;
      color: #aaaa7f;
    }
  
  </style>
</head>

<body>

  <div class="aasd " style="text-align: left;padding-left: 15px;">
    <span >
      aaaaaaaaa</span>
  </div>

</body>

</html>