小程序css样式

justify-content演示效果

http://www.runoob.com/try/playit.php?f=playcss_justify-content&preval=center

css三角形

我们的思路是使用border边框来实现三角形的样式，因为border的边框是由四个三角形组成的。

1.带边框的​​​​​矩形

布局wxml：

样式wcss：

.original{
  width: 40rpx;
  height: 40rpx;
  border-width: 40rpx 40rpx 40rpx 40rpx;
  border-style:solid;
  border-color: red green blue orange; 
}

2.矩形的宽高设置为0

.rect{
  width: 0rpx;
  height: 0rpx;
  border-width: 40rpx 40rpx 40rpx 40rpx;
  border-style:solid;
  border-color: red green blue orange; 
}

3.向上的三角形

（思路：上边框的高度设置为0，上，右，左颜色为透明）

.triangle-top {
   width: 0rpx;
  height: 0rpx;
   border-width: 0rpx 40rpx 40rpx 40rpx;
  border-style: solid;
  border-color: transparent transparent blue transparent; /*透明 透明 蓝 透明*/

三角形-右

.triangle-right {
   width: 0rpx;
  height: 0rpx;
  border-width: 40rpx 0rpx 40rpx 40rpx;
  border-style: solid;
  border-color: transparent transparent transparent blue; /*透明 透明 蓝 透明*/
}

三角形-下

.triangle-bottom {
   width: 0rpx;
  height: 0rpx;
   border-width: 40rpx 40rpx 0rpx;
  border-style: solid;
  border-color: blue transparent transparent; /*透明 透明 蓝 透明*/
}

三角形-左

.triangle-left {
   width: 0rpx;
  height: 0rpx;
   border-width: 40rpx  40rpx 40rpx 0rpx;
  border-style: solid;
  border-color:  transparent blue transparent transparent ; /*透明 透明 蓝 透明*/
}

。。。