css画三角形和提示框

dockerclub 发布于2019-08-29 16:08 / 1307人阅读

摘要：想要的效果图片利用伪元素原理两个三角形一样大，位置错开，第一个红色第二个白色，第二个覆盖第一个三角形画法，不多说，利用和上代码

想要的效果（图片）

利用css伪元素

demo1.gif

原理

两个三角形一样大，位置错开1~2px，第一个红色第二个白色，第二个覆盖第一个
三角形画法，不多说，利用border 和 transparent

上代码

</>复制代码 
.a::before {
    content: "";
    border-width: 0px 4px 4px 4px;
    border-style: solid;
    border-color: transparent transparent red transparent;
    position: absolute;
    top: -4px;
    left: 38px;
  }
  .a::after {
    content: "";
    border-width: 0px 4px 4px 4px;
    border-style: solid;
    border-color: transparent transparent white transparent;
    top: -3px;
    left: 38px;
    position: absolute;
  }
  .a {
    position: relative;
    position: relative;
    display: inline-block;
    border: 1px solid red;
    width: 80px;
    height: 20px;
    text-align: center;
  }

</>复制代码 
12

云服务器 GPU云服务器画三角形 html画三角箭头 css三角形 css三角

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/113553.html

前端每日实战：153# 视频演示如何用 CSS 和原生 JS 创作一组 tooltip 提示框

摘要：这里的常量存储了个方向，常量存储了个鼠标事件，常量包装了根据类名获取元素的操作为眼珠设置缓动时间，使动画平滑接下来制作提示框。 showImg(https://segmentfault.com/img/bVbh12C?w=400&h=303); 效果预览按下右侧的点击预览按钮可以在当前页面预览，点击链接可以全屏预览。 https://codepen.io/comehope/pen/r...

高胜山 2019-08-29 16:55 评论0 收藏0
前端每日实战：153# 视频演示如何用 CSS 和原生 JS 创作一组 tooltip 提示框

摘要：这里的常量存储了个方向，常量存储了个鼠标事件，常量包装了根据类名获取元素的操作为眼珠设置缓动时间，使动画平滑接下来制作提示框。 showImg(https://segmentfault.com/img/bVbh12C?w=400&h=303); 效果预览按下右侧的点击预览按钮可以在当前页面预览，点击链接可以全屏预览。 https://codepen.io/comehope/pen/r...

赵春朋 2019-08-23 12:17 评论0 收藏0
css3之图形绘制

摘要：由于近期的项目中出现了不规则的边框和图形，所以重新温习一下的图形绘制。。。样式绘制的图形比图片的性能要好，体验更佳，关键一点是更加有趣以下几个例子主要是运用了中伪元素等属性来完成的，我们先了解下它们的基本原理。由于近期的项目中出现了不规则的边框和图形，所以重新温习一下CSS3的图形绘制。。。样式绘制的图形比图片的性能要好，体验更佳，关键一点是更加有趣！以下几个例子主要是运用了css3中b...

Null 2019-04-23 13:28 评论0 收藏0
css3图形绘制

摘要：以下几个例子主要是运用了中伪元素等属性来完成的，我们先了解下它们的基本原理。简单的来说语法主要包含三个属性。你可能会惊讶地发现原来是一个简写属性。以下几个例子主要是运用了css3中border、bordr-radius、transform、伪元素等属性来完成的，我们先了解下它们的基本原理。 border：简单的来说border语法主要包含（border-width、border-...

niceforbear 2019-04-23 13:09 评论0 收藏0