寫在前面

本人是個初學者，2016年9月份開始接觸編程，真正確定自學編程是10月份的事情，正好趕上微信小程序開發熱潮，所以就以它為主要學習目標。

這個小作品是個人學習用，僅供學習參考！

歡迎前輩朋友給予指正問題和不足，也感謝鼓勵，謝謝！

github地址：https://github.com/iamsongpeng/mini-program-store

<!--more-->

待完善內容：

• 動態綁定標題
• 頁面內刷新內容
• 馬上購物和加入購物車按鈕實現：sku商品組合
  • Sku算法，Android實現，淘寶Sku實現
• LeanCloud 數據庫更新，不合理之處修正修正
• 分類頁背景顏色變化效果制作
• 最新頁和最熱頁制作
• 購物車demo優化，邏輯層完善
• 我的頁demo優化，邏輯層完善
• 新增地址頁：邏輯層完善
• 代碼優化：多出可以用模板的，改用模板；部分函數提取到util.js中

已更新內容：

2017-2-14 更新日志

1. READEME.md文件增加日志內容
2. 優化添加地址頁的 form 表單，使用偽元素和定位實現倒三角符號；

歷史更新日志

歷史更新日志

微信小程序商城demo(模仿”Coolbuy玩物志”小程序)

主要思路

持續待更新中~

首頁

分類頁

分類詳情頁

詳情頁

詳情頁，加入購物車彈窗

購物車

我的頁，我的訂單

我的頁，地址管理

新增地址

樣式

倒三角符號實現

主要利用了偽元素和定位來完成：

這里首先定義一個view（類比html中的div），給它加上一個view叫做view-triangle，主要是用來給它自身定義背景，寬高，并且需要加上相對定位，因為它里面的三角符號需要在它的基礎上進行絕對定位；

在這個view class上面加一個before或者after的偽元素，這個就是三角符號，主要利用了它的border屬性，定義三個border，讓border-left和border-right透明，讓border-top（或border-bottom）非透明，取決于你想將這個三角符號設置成什么顏色。

最后需要給這個三角符號進行絕對定位，如果你要將它放在這個view的最下面，可以設置bottom：0，如果你要做一個導航類的三角讓它在view頂部并指向某元素，可以采用負的top值進行實現，其為負的border的寬度，就可以讓它和view連在一起。

同時，要設置這個偽元素寬高為0，內容為空，剩下的工作就是調整它的位置了。

原文：《使用html+css實現三角標示符號》