小三角符号制作原理

最新推荐文章于 2021-06-05 05:18:30 发布

lhusailiu

最新推荐文章于 2021-06-05 05:18:30 发布

阅读量400

点赞数

分类专栏：前端练习

本文链接：https://blog.csdn.net/lhusailiu/article/details/72675834

版权

前端练习专栏收录该内容

15 篇文章 0 订阅

订阅专栏

制作方法01

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <style>

	*  {
	      margin:0px;
	      padding: 0px;
}
      .box {
         width: 200px;
         height: 50px;
         background-color: skyblue;
         margin:100px;


}

       s {
       	text-align:center;
       	overflow:hidden;
       	display:inline-block;
       	font-family:"宋体";
       	font-size:15px;
       	height: 15px;
       	width: 15px;
       	line-height: 3px;
       	text-decoration:none;
       	font-style:normal;
       	/* border:1px solid red; */
       	margin-top:20px;
      
}
        </style>	

    </head>
    <body>
         <div class="box">
         <s>◇</s>
         </div>
    </body>
</html>

制作方法02

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <style>


	    * {
		margin:0px;
	        padding: 0px;
}
      .box {
         width: 200px;
         height: 50px;
         background-color: skyblue;
         margin:100px;




}       
        i {
        	height: 7px;
        	width: 15px;
        	display:inline-block;
        	/* border:1px solid blue; */
        	position:relative;
        	margin-top:17px;
        	overflow:hidden;




        }


       s {
       	text-align:center;
       	font-family:"宋体";
       	font-size:15px;
       	height: 15px;
       	width: 15px;
       	line-height:15px;
       	text-decoration:none;
       	font-style:normal;
       	position:absolute;
       	top:-7px;
       	left:0px;




      
}
        </style>	


    </head>
    <body>
         <div class="box">
          <i><s>◇</s></i>
         </div>
    </body>
</html>

lhusailiu

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
小三角符号制作原理

制作方法01 * { margin:0px; padding: 0px;} .box { width: 200px; height: 50px; background-color: skyblue; margin:100px;
复制链接

扫一扫