css中淘寶網的更多三角製作
阿新 • • 發佈：2018-12-30
前面說了易迅三角的實現方法，現在來說說另外一個三角-淘寶三角，如下圖所示
淘寶三角形該怎麼實現呢？肯定是需要兩個三角形來層疊在一起的，只要進行如下圖的層疊這個淘寶三角就出來了。
程式碼如下：同樣需要使用子絕父相的方法來進行定位，好讓兩個三角形層疊在一起
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .one { position: relative; } span { position: absolute; display: inline-block; width: 0; height: 0; border-width: 6px; border-style: dashed dashed dashed solid; /*dashed是設定虛線*/ } .s1 { top: 3px; left: 35px; border-color: transparent transparent transparent red; } .s2 { top: 3px; left: 35; border-color: transparent transparent transparent white; } </style> </head> <body> <div class="one"> 更多<span class="s1"></span><span class="s2"></span> </div> </body> </html>
