CSS——◇demo
核心思想:嵌套盒子中的◇超过父盒子的部分隐藏。
第一种写法:
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style> div{ width:100px; height:30px; background-color:#eee; position:relative; } i,s{ text-decoration:none; font-style:normal; } i{ position:absolute; right:0; top:12px; width:10px; height:7px; background-color:aliceblue; font:400 13px/13px "微软雅黑"; overflow:hidden; } s{ position:absolute; top:2px; } </style> </head> <body> <div> <i><s>◇</s></i> </div> </body> </html>
第二种写法:
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style> div{ width:100px; height:30px; background-color:#eee; position:relative; } i,s{ text-decoration:none; font-style:normal; } i{ position:absolute; right:0; top:12px; width:10px; height:7px; background-color:aliceblue; font:400 13px/13px "微软雅黑"; overflow:hidden; } s{ display:block; margin-top:-6px; } </style> </head> <body> <div> <i><s>◇</s></i> </div> </body> </html>
效果:
注释:s标签必须转成块级元素,display的值必须是block。