afert和b的伪类画三角形

/* 提示信息 */
.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的伪类画三角形的更多相关文章
- 使用before、after伪类制作三角形
使用before.after伪类实现三角形的制作,不需要再为三角形增加不必要的DOM元素,影响阅读. <!DOCTYPE html><html><head> ...
- 利用border和伪类画出三角形 ps:好久没写博客了。。。
有一个半月没有写博客了,这段时间,小哥我经历了自入行前端最为黑暗的时期,迷茫,空虚,不想写代码,不想做研究了.连打游戏都没有兴趣,如同行尸走肉一般.还好,毕业论文的初稿完成后,整个时间段最恶心最难熬的 ...
- 用css伪类制作三角形的三种方法
在手机上写三角形的时候,我一般都用伪类,刚开始的时候用的图片,但是在现在的手机高清屏幕上,图片容易失真,还是用伪类吧! 第一种:一个90度的“ > ”, 只有线条.(可以做下拉框的箭头之类的) ...
- :after和:before 伪类
1 使用伪类画三角形 .div{ margin-top: 100px; margin-left: 100px; } .div:after{ content: ''; display:inline-bl ...
- css伪类:before及:after除了插入文字内容还能做点儿啥?画图
全手打原创,转载请标明出处:https://www.cnblogs.com/dreamsqin/p/11181416.html 1.什么时候用伪类:before和:after? 结合实际开发情况,说一 ...
- css伪元素before/after和画三角形的搭配应用
想要实现的效果如下: 第一步:如何用css画出三角形? /* css画三角形 */ .sanjiao{ ; border-top:40px solid red; border-bottom:40px ...
- 前端(各种demo)一:css实现三角形,css实现梯形,pop弹层,css伪类before,after使用,svg使用(持续更新中)
各种demo: 1.css实现正方形 思路:width为0:height为0:使用boder-width为正方形的边长的一半,不占任何字节:border-style为固体:border-color为正 ...
- 理解使用before,after伪类实现小三角形气泡框
先来理解before和after伪类的用法吧,before从字面上的意思可以理解为前面的意思,它一般和content属性一起使用,把内容插入在其他元素的前面,同理after的含义就是把内容插入到其他元 ...
- 伪类实现特殊图形,一个span加三角形
题目如图: 实现思路: 伪类+三边透明的三角形实现 代码: <span class="wei">wei</span> .wei{ display: inli ...
随机推荐
- Redis(一):数据结构与对象
前言 本书是Redis设计与实现的读书笔记,旨在对Redis底层的数据结构及实现有一定了解.本书所有的代码基于Redis 3.0. 简单动态字符串 SDS Redis没有直接使用C语言中的字符串,而是 ...
- (转)logback配置详解
找到一篇很详细的关于logback配置的介绍: 贴上原文链接:logback使用配置详解 1.介绍 Logback是由log4j创始人设计的另一个开源日志组件,它当前分为下面下个模块: logback ...
- vue做商品选择如何保持样式
是这样的情况:我知道,在vue里,实现点击高亮,可以使用诸如: <div class="static" v-bind:class="{defaultClass ,a ...
- MySQL 增删改查(单表)
1.sql 新增语句 表中插入数据 insert into + 表名 values(字段1value1,字段2value1,字段3value1),(字段1value2,字段2value2,字段3val ...
- C语言程序设计实验报告四
C程序设计实验报告 姓 名:赖瑾 实验地点:家 实验时间:2020年4月9日 实验项目:5.3.1练习2 求数列的前n项和 5.3.2练习2 求水仙花数 5.3.4 十进制转换 5.3.5练习1 百马 ...
- BAN-Bank Notes(更麻烦的背包方案)
传送门 这题的记录方案,真是,毒瘤........ \(很明显的二进制优化多重背包\) \(重点是,如何记录方案?\) \(用一维的pre数组是不行的!!(不信你去试试,方案之间选的物品会重复)\) ...
- G. Yash And Trees 线段树 + dfs序 + bitset
这个是要用bitset 一个大整数的二进制 学习推荐博客 这个题目大意就是:给你n,m 还有一个序列,还有一个一棵树,有一种操作一种询问 操作是给你一个节点 把这个节点及其子节点都加上x 询问是 给你 ...
- GoF23:设计模式概述
目录 学习设计模式的意义 GoF23 创建型模式(5种) 结构型模式(7种) 行为型模式(11种) OOP七大原则 开闭原则(总的纲领) 里氏替换原则 依赖倒置原则 单一职责原则 接口隔离原则 迪米特 ...
- Spring Cloud学习 之 Spring Cloud Hystrix(基础知识铺垫)
Spring Boot版本:2.1.4.RELEASE Spring Cloud版本:Greenwich.SR1 文章目录 前述: 快速入门: 命令模式: RxJava: 前述: 在微服务架构中, ...
- Synchronized 和 ReentrantLock (Lock )的区别
原始构成 Synchronized 是关键字,属于JVM层面,底层是通过 monitorenter 和 monitorexit 完成,依赖于 monitor 对象来完成.由于 wait/notify ...