卡片右上角三角形效果,按钮点击变色

微信小程序开发交流qq群   173683895

   承接微信小程序开发。扫码加微信。

正文：

效果图：

实现代码：

<view class='privilege_list'>
  <view class='privilege_card {{in_right_top==1?"bg":""}}' bindtap='in_card' id='1'>
  <view class='r_text'>特权</view>
    <view class='right_top {{in_right_top==1?"in_right_top":""}}'></view>
    <image class='img' src='/images/icon/kingcard.png'></image>
    <view class='title'>腾讯王卡</view>
    <view class='content'>送100分钟语音</view>
  </view>
  <view class='privilege_card {{in_right_top==2?"bg":""}}' bindtap='in_card' id='2'>
  <view class='r_text'>VIP</view>
    <view class='right_top {{in_right_top==2?"in_right_top":""}}'></view>
    <image class='img' src='/images/icon/video.png'></image>
    <view class='title'>腾讯视频</view>
    <view class='content'>立减6元</view>
  </view>
</view>

js

  in_card:function(e){
    this.setData({
      in_right_top: e.currentTarget.id
    })
  },

 

css

 

/* 特权卡 */

.privilege_list {
  margin-top: 20rpx;
  display: flex;
  width: 100%;
  padding-left: 40rpx;
  padding-bottom: 26rpx;
  border-bottom: 1px solid #d0d0d0;
  flex-direction: row;
}

.privilege_card {
  height: 230rpx;
  width: 30%;
  margin-right: 25rpx;
  border-radius: 15rpx;
  border: 1px solid #d0d0d0;
  position: relative;
}

.privilege_list .privilege_card .right_top {
  position: absolute;
  right: 0;
  text-align: right;
  font-size: 28rpx;
  color: white;
  width: 0;
  height: 0;
  border-top: 80rpx solid #d0d0d0;
  border-left:100rpx solid transparent;
}
.privilege_list .privilege_card .r_text{
  position: absolute;
  right: 8rpx;
  top: 5rpx;
  font-size: 26rpx;
  color: white;
  z-index: 2;
}
.privilege_list .privilege_card .in_right_top {
  border-top: 80rpx solid #1AAC19;
}
.privilege_list .bg{
  background: #CCFCC0;
}
.privilege_card .img{
  width: 100rpx;
  height: 80rpx;
  text-align: center;
  margin-top: 30rpx;
  position: relative;
  left: 50%;
  margin-left: -50rpx;
}
.privilege_card .title{
  text-align: center;
  margin-top: 10rpx;
  font-size: 32rpx;
}
.privilege_card .content{
  text-align: center;
  font-size: 25rpx;
  margin-top: 10rpx;
  color: #50C04F;
}