简单的使用css画勾、叉、三角、大于号

勾

.gou{width: 9px;height: 18px;border-right:2px solid #f39800;border-bottom:2px solid #f39800;transform: rotate(40deg);
}

叉

.cha{width: 20px;height: 20px;margin: auto;position: relative;
}
.cha::before,
.cha::after{content: "";position: absolute;  /*方便进行定位*/height: 20px;width: 1.5px;top: 2px;right: 9px;  /*设置top和right使图像在20*20框中居中*/background: #f39800;
}
.cha::before{transform: rotate(45deg);  /*进行旋转*/
}
.cha::after{transform: rotate(-45deg);
}

在框上方画小三角

.hf_content2{position: relative;
}
.hf_content2::after {content: '';width: 0;height: 0;border: 0.5rem solid transparent;border-bottom: 0.5rem solid #000;position: absolute;top: -1rem;left: 48%;transform: translateX(-50%);z-index: 100;
}

画大于号

li{position: relative;
}
li:after{content: '';width: 12px;height: 12px;position: absolute;right: 5px;bottom: 5px;border-left: 2px solid #000;border-bottom: 2px solid #000;-webkit-transform: translate(0,-50%) rotate(-135deg);transform: translate(0,-50%) rotate(-135deg);
}

简单的使用css画勾、叉、三角、大于号相关推荐

【Css】css中class之间＞(大于号)、~(波浪号)、 (空格)、,(逗号)、+(加号)详解（转载，笔记用）
css中">"(大于号)."~"(波浪号)." "(空格).","(逗号)."+"(加号)详解 ...
简单的特效--css画圆圈
注释的代码是点击画圈圈,没有注释的是长按画圆圈(ps:是效果) <!DOCTYPE html> <html lang="en"> <head> ...
我用CSS画了个火箭送嫦娥妹妹回家
我用CSS画了个火箭送嫦娥妹妹回家就在8月17号我国神州十二号载人飞船顺利回家.又恰逢中秋佳节,真是值得庆祝的一天.我这灵机一动,就想着开火箭送嫦娥妹妹回家,哈哈~ 先来看看成品. 接下来看看怎么实 ...
CSS样式中” 大于号”
CSS样式中" 大于号" 在一段CSS代码中见到一个大于号(>),代码如下: BODY#css-zen-garden > DIV#extraDiv2 { BACKGRO ...
用css画一个原型里有一个对号或者叉叉的图标
用css画一个圆形里有一个对勾或者叉叉的图标 <!DOCTYPE html> <html lang="en"><head><meta ch ...
用css画出一个圆圈，里面有个叉号（不能用英文字母x）
用css画出一个圆圈,里面有个叉号(不能用英文字母x) #cyc {width: 150px;height: 150px;margin: 100px auto;border-radius: 50%;b ...
利用css画三角箭头图标
利用css画三角箭头图标方式单独设置正方形的两条相邻的边框,通过transform的rotate属性值旋转实现箭头图标(注意单位为deg) div {width: 50px;height: 50px ...
纯CSS画一只简单的小鸟
用css简单画了一只小鸟,效果图如下: 代码如下: HTML: <div class="box-canvas"> <div class="body&qu ...
html怎么画3角型当背景,纯CSS画三角原理解析
纯CSS画三角原理解析因为之前做一个页面出现了很多三角,开始直接用图片感觉并不是很好用,看着总是怪怪的颜色还很难调整的跟背景一样,就搜了一波代码直接用上了,事后想了一下感觉不知道具体原理是什么,很奇 ...

简单的使用css画勾、叉、三角、大于号

简单的使用css画勾、叉、三角、大于号相关推荐

最新文章

热门文章