zoukankan      html  css  js  c++  java
  • 画对话气泡:矩形框+小三角的拼接图形

    0. 起因

    项目开发过程中遇到要使用这种图案的情况,于是自己用CSS强大的::before::after画了两个类似图案。

    1. 代码

    三角在前

    @mixin setRange($color: null) {
      margin-left: 10px;
      margin-bottom: 15%;
      margin-top: 40%;
       40px;
      height: 20px;
      background: $color;
      position: relative;
      &::before {
        content: "";
        position: absolute;
        right: 100%;
         0;
        height: 0;
        border-top: 10px solid transparent;
        border-right: 15px solid $color;
        border-bottom: 10px solid transparent;
      }
    }
    

    效果如图
    image

    三角在后
    注意这里用到了transform: rotate(90edg),为了让小三角旋转到对应位置

    @mixin setCurrentLevel($left: null, $color: null, $recLeft: 28px) {
      margin-left: $left;
      margin-bottom: 10px;
      margin-top: 10px;
       60px;
      height: 20px;
      background: $color;
      position: relative;
      &::after {
        content: "";
        position: absolute;
        top: -9px;
        left: $recLeft;
        right: 100%;
         0;
        height: 0;
        transform: rotate(90deg);
        border-top: 5px solid transparent;
        border-right: 10px solid $color;
        border-bottom: 5px solid transparent;
      }
    }
    

    效果如图
    image

    2.加强版

    如果用了positon:absolute,就不要再用top与left了。大小改变后绝对位置不一定还是刚好的,所以

        &::after {
          content: "";
          position: absolute;
          // top: 53.65vh;
          // left: 93%;
          left: 94%;
           0;
          height: 0;
          border-left: 6px solid #00f295;
          border-bottom: 3px solid transparent;
        }
    

    image

    参考文章

    人生到处知何似,应似飞鸿踏雪泥。
  • 相关阅读:
    bzoj4517 [Sdoi2016]排列计数
    bzoj1415 [Noi2005]聪聪和可可
    两个系列的书
    陈天权:数学分析教学中学到的和想到的
    广义范德蒙德行列式计算
    蒙特卡罗方法入门
    LaTeX 文字带边框
    LaTeX算法排版
    常用工具
    常用算法
  • 原文地址:https://www.cnblogs.com/lepanyou/p/15528753.html
Copyright © 2011-2022 走看看