css3内向倒三角的实现图片更直观

dabobo

73811

发布于
2016-04-08

更新于
2016-04-08

图片描述

如图，正常的气泡，三角不管是用传统方法实现还是，css都表容易实现，但是这个三角效果，怎么才能实现呢，求教
如果用canvas画图的话，有点浪费，纯css3是否有实现方案呢
我的思路是方形旋转45°，两边不透明

css

阅读 2.9k

2 个回答

Jovey

简单的一个思路，可以参考一下：

<!DOCTYPE html>
<html lang="zh-cn">
<head>
  <meta charset="UTF-8">
  <title>Document</title>

  <style>
    .a {
      margin: 100px auto;
      width: 200px;
      position: relative;
      border-bottom: 1px solid #333;
    }
    .a:after {
      position: absolute;
      top: -5px;
      left: 50%;
      margin-left: -5px;
      content: '';
      transform: rotate(45deg);
      border-top: 1px solid #333;
      border-left: 1px solid #333;
      height: 10px;
      width: 10px;
      background: #fff;
    }
  </style>
</head>
<body>
  <div class="a"></div>
</body>
</html>

效果图：