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

最新推荐文章于 2024-08-19 11:56:40 发布

小啾玖

最新推荐文章于 2024-08-19 11:56:40 发布

阅读量1.2w

点赞数 4

分类专栏： css常用样式文章标签：勾、叉、三角

本文链接：https://blog.csdn.net/Luxuriant_tree/article/details/83181888

版权

css常用样式专栏收录该内容

7 篇文章 0 订阅

订阅专栏

勾
在这里插入图片描述

.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);
}