1. /* 提示信息 */
  2. .content-tishi{
  3. width: 6.93rem;
  4. margin: 0 auto;
  5. background: #e9eaea;
  6. display: flex;
  7. flex-direction: column;
  8. margin-top: 0.55rem;
  9. padding: 0.3rem 0.32rem 0.31rem 0.32rem;
  10. border-radius: 0.1rem;
  11. position: relative;
  12. }
  13.  
  14. .content-tishi::before{
  15. content: "";
  16. width: 0.0rem;
  17. height: 0.2rem;
  18. display: block;
  19.  
  20. 三角形重点---------------------------------------
  21. border-right:0.2rem solid transparent;
  22. border-bottom:0.4rem solid #e9eaea;
  23. border-left: 0.2rem solid transparent;
    -------------------------------------------------------------
  24. position: absolute;
  25. top: -20px;
  26. left: 20px;
  27. }

afert和b的伪类画三角形的更多相关文章

  1. 使用before、after伪类制作三角形

    使用before.after伪类实现三角形的制作,不需要再为三角形增加不必要的DOM元素,影响阅读. <!DOCTYPE html><html><head>    ...

  2. 利用border和伪类画出三角形 ps:好久没写博客了。。。

    有一个半月没有写博客了,这段时间,小哥我经历了自入行前端最为黑暗的时期,迷茫,空虚,不想写代码,不想做研究了.连打游戏都没有兴趣,如同行尸走肉一般.还好,毕业论文的初稿完成后,整个时间段最恶心最难熬的 ...

  3. 用css伪类制作三角形的三种方法

    在手机上写三角形的时候,我一般都用伪类,刚开始的时候用的图片,但是在现在的手机高清屏幕上,图片容易失真,还是用伪类吧! 第一种:一个90度的“ > ”, 只有线条.(可以做下拉框的箭头之类的) ...

  4. :after和:before 伪类

    1 使用伪类画三角形 .div{ margin-top: 100px; margin-left: 100px; } .div:after{ content: ''; display:inline-bl ...

  5. css伪类:before及:after除了插入文字内容还能做点儿啥?画图

    全手打原创,转载请标明出处:https://www.cnblogs.com/dreamsqin/p/11181416.html 1.什么时候用伪类:before和:after? 结合实际开发情况,说一 ...

  6. css伪元素before/after和画三角形的搭配应用

    想要实现的效果如下: 第一步:如何用css画出三角形? /* css画三角形 */ .sanjiao{ ; border-top:40px solid red; border-bottom:40px ...

  7. 前端(各种demo)一:css实现三角形,css实现梯形,pop弹层,css伪类before,after使用,svg使用(持续更新中)

    各种demo: 1.css实现正方形 思路:width为0:height为0:使用boder-width为正方形的边长的一半,不占任何字节:border-style为固体:border-color为正 ...

  8. 理解使用before,after伪类实现小三角形气泡框

    先来理解before和after伪类的用法吧,before从字面上的意思可以理解为前面的意思,它一般和content属性一起使用,把内容插入在其他元素的前面,同理after的含义就是把内容插入到其他元 ...

  9. 伪类实现特殊图形,一个span加三角形

    题目如图: 实现思路: 伪类+三边透明的三角形实现 代码: <span class="wei">wei</span> .wei{ display: inli ...

随机推荐

  1. resetlogs 打开数据库时新生成日志位置问题

    若系统中缺少联机日志,以resetlogs方式重建控制文件,那么当我们以alter database open resetlogs方式打开数据库时,新生成的联机日志会位于何处? 一:下面分别讨论几种情 ...

  2. Alink漫谈(一) : 从KMeans算法实现不同看Alink设计思想

    Alink漫谈(一) : 从KMeans算法实现不同看Alink设计思想 目录 Alink漫谈(一) : 从KMeans算法实现不同看Alink设计思想 0x00 摘要 0x01 Flink 是什么 ...

  3. jenkins 安装成功之后配置

    一.基础配置介绍 jenkins安装成功之后如果某些东西配置的话,可能部署的时候一堆的问题,所以单独总结一下,让大家少走弯路 二.准备工作 1.需要准备一台服务器,大家可以在网上买,个人学习的话还是建 ...

  4. CTF-Reverse-[GXYCTF2019]luck_guy

    CTF-Reverse-[GXYCTF2019]luck_guy 博客说明 文章所涉及的资料来自互联网整理和个人总结,意在于个人学习和经验汇总,如有什么地方侵权,请联系本人删除,谢谢!本文仅用于学习与 ...

  5. 《C程序设计语言》 练习2-4

    问题描述 重新编写函数squeeze(s1,s2),将字符串s1中任何与字符串s2中字符匹配的字符都删除. Write an alternate version of squeeze(s1,s2) t ...

  6. 【Kafka】CAP理论以及CAP定律

    目录 CAP理论 概述 Consistency Availability Partition Tolerance CAP理论 概述 1988年,加州大学计算机科学家Eric Brewer 提出了分布式 ...

  7. STM32 TIM 多通道互补PWM波形输出配置快速入门

    platform:stm32f10xxx lib:STM32F10x_StdPeriph_Lib_V3.5.0 前言 在做三相逆变的时候,需要软件生成SVPWM波形,具体的算法需要产生三对互补的PWM ...

  8. js--bom对象

    bom:browser object model **navigator:获取浏览器的信息 **screen:获取屏幕的相关信息 **location:请求的url地址 **获取请求的url地址:lo ...

  9. JDBC09 CLOB文本大对象

    CLOB(Character Large Object) -用于储存大量的文本数据 BLOB(Binary Large Object) -用于存储大量的二进制数据 -大字段有些特殊,不同数据处理的方式 ...

  10. Windows 10 IoT Core用PWM控制器控制树莓派LED灯亮度

    我接到一个需求,需要调节LED灯的亮度,且是从上位机进行控制,我了解到树莓派也有PWM,就准备通过PWM来控制灯的亮度. PWM又叫脉宽调制,是用微处理器的数字输出来对模拟电路进行控制,对模拟信号电平 ...