css3 勾和叉的布局（√、×）

最新推荐文章于 2022-01-20 20:36:55 发布

chengchengbox

最新推荐文章于 2022-01-20 20:36:55 发布

阅读量2.2k

点赞数 1

分类专栏： html css 文章标签： html css 特殊字符

本文链接：https://blog.csdn.net/qq_34297991/article/details/85689947

版权

html 同时被 2 个专栏收录

36 篇文章 0 订阅

订阅专栏

css

12 篇文章 0 订阅

订阅专栏

一、勾

<style>

	a{ display: inline-block; width: 10px;height:5px; background: red;line-height: 0;font-size:0;vertical-align: middle;-webkit-transform: rotate(45deg);}
    a:after{content:'/';display:block;width: 20px;height:5px; background: red;-webkit-transform: rotate(-90deg) translateY(-50%) translateX(50%);}
	  
	#test{width:100px;height:100px;    padding: 50px;}
</style>
<div id="test">
	<a></a>
</div>

二、叉

<style>

	a{ display: inline-block; width: 20px;height:5px; background: red;line-height: 0;font-size:0;vertical-align: middle;-webkit-transform: rotate(45deg);}
	a:after{content:'/';display:block;width: 20px;height:5px; background: red;-webkit-transform: rotate(-90deg);}
	  
	#test{width:100px;height:100px;    padding: 50px;}
</style>
<div id="test">
	<a></a>
</div>