/* 提示信息 */
.content-tishi{
width: 6.93rem;
margin: 0 auto;
background: #e9eaea;
display: flex;
flex-direction: column;
margin-top: 0.55rem;
padding: 0.3rem 0.32rem 0.31rem 0.32rem;
border-radius: 0.1rem;
position: relative;
} .content-tishi::before{
content: "";
width: 0.0rem;
height: 0.2rem;
display: block; 三角形重点---------------------------------------
border-right:0.2rem solid transparent;
border-bottom:0.4rem solid #e9eaea;
border-left: 0.2rem solid transparent;
-------------------------------------------------------------
position: absolute;
top: -20px;
left: 20px;
}

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. 聚集表(clustered table)data page中的数据行可以无序

    误区 一直以为只要一个表含有聚集索引,那么在data page中的数据行是排序的.比如原来data page中有1.2.4.5.6这样四条记录,那么我要插入3这条记录,应该是先将456三条记录往后移, ...

  2. Jenkins 部署(基于 Linux)

    1.安装 JDK  我不列出来了,自行百度 java -version 2.安装 tomcat (1)创建目录 tomcat8 (2)导入 tomcat 文件到 tomcat8 录中并解压 (3)启动 ...

  3. 【Java新特性】Lambda表达式典型案例,你想要的的都在这儿了!!

    写在前面 不得不说,有些小伙伴的学习热情真高,学完了Lambda表达式的语法,想来几个典型案例再强化下.于是问冰河能否给几个Lambda表达式的典型使用示例.于是乎,便有了这篇文章. 案例一 需求 调 ...

  4. Java面试札记

    Java面试札记  在最深的夜里,即使是你的影子也会离你而去. 背景:愿某人在中秋节之前吃上大厂月饼!!!@CDZ 1.Java的八种基本数据类型? 整型:byte.int.short.long: 浮 ...

  5. Qt标准对话框按钮文字等设置为中文

    问题描述:QMessageBox.QColorDialog等标准对话框按钮显示都是英文 设置中文方法如下: 1)拷贝Qt安装目录下的qt_zh_CN.qm和qt_zh_CN.ts文件到工程目录中 2) ...

  6. 2018-06-25 js表单事件、三个高度和Ajax异步通讯技术

    表单事件: onfocus -> 表单控件得到焦点时触发: obj_ipt.onfocus=function(){}; onblur -> 表单控件失去焦点时: onchange -> ...

  7. 容器技术之LXC WEB管理工具LXC WEB Panel

    前一篇博文中主要说了下,lxc容器在Linux上的简单管理,回顾请参考https://www.cnblogs.com/qiuhom-1874/p/12901493.html:今天我们来介绍下lxc的图 ...

  8. 黑马程序员_毕向东_Java基础视频教程——赋值(随笔)

    赋值 class Test{ public static void main(String[] args) { int i = 3; // += -= *= /= %= 它们凑一块成为一个运算符 x ...

  9. Shell脚本定时监控

    1.建立脚本文件 autostart.sh #!/bin/bashexport JAVA_HOME=/home/java/jdk1.8.0_191export JRE_HOME=$JAVA_HOME/ ...

  10. Netty源码死磕一(netty线程模型及EventLoop机制)

    引言 好久没有写博客了,近期准备把Netty源码啃一遍.在这之前本想直接看源码,但是看到后面发现其实效率不高, 有些概念还是有必要回头再细啃的,特别是其线程模型以及EventLoop的概念. 当然在开 ...