._left{
position: relative;
margin-top: 40rpx;
width: 40%;
height: 350rpx;
border-radius: 12rpx;
text-align: center;
font-size: 26rpx;
background-color: #FCF2D7;
color: #9F7F43;
border: 2rpx solid #FFC11B;
} ._left:before{
content: '';
display: inline-block;
position: absolute;
right: 0;
top: 0;
width: 0;
height: 0;
border-top: 28px solid #FBCF6B;
border-left: 28px solid transparent; }
._left:after{
content: '';
position: absolute;
right: 1px;
top: 5px;
width: 8px;
height: 4px;
display: inline-block;
border: 1px solid #fff;
border-width: 0 0 1px 1px;
transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
vertical-align: baseline;
}

微信小程序 div选中效果的更多相关文章

  1. 微信小程序的动画效果

    前言 由于公司计划有变,所以从H5页面改成去小程序写.所以在着手开发小程序.本人也不是什么前端高手,只是一名写后端偶尔写写前端的渣渣.请前端大神们勿喷. 一.什么是微信小程序? 小程序在我的理解中只是 ...

  2. 微信小程序CheckBox选中事件

    1.微信小程CheckBox选中问题 <checkbox-group bindchange="checkboxChange" data-index="{{index ...

  3. 微信小程序button选中改样式-实现单选/多选

    小程序实现多button单选/多选 红色为选中状态 单选 多选 ①wxss /* pages/button-select/button-select.wxss */ .button_container ...

  4. 微信小程序之楼层效果

    今天做了一个小程序实现一个楼层效果  带大家分享下经验和api的使用吧 如图 将左边和右边各分了一个组件  目录如下 其中list页面是这个楼层效果的页面 components是组成这个页面的两个组件 ...

  5. 微信小程序跑马灯效果--基于CSS3 animation 及 基于JS

    如果本文对你有用,请爱心点个赞,提高排名,帮助更多的人.谢谢大家!❤ 如果解决不了,可以在文末进群交流. 基于CSS3主要代码实现 效果图: 视图模板wxml中: <view class=&qu ...

  6. 微信小程序切换选中状态

     实现的主要思路是根据每一项的index值,动态改变idx值,当index==idx值的时候,添加点击选中样式的类名. wxml: <scroll-view scroll-x="tru ...

  7. 微信小程序单个倒计时效果

    var end_time = grouponList.expire_time.replace(/-/g, '/') grouponcountdown(that, end_time) //适用于商品列表 ...

  8. 微信小程序踩坑集合

    1:官方工具:https://mp.weixin.qq.com/debug/w ... tml?t=1476434678461 2:简易教程:https://mp.weixin.qq.com/debu ...

  9. 微信小程序源码推荐

    wx-gesture-lock  微信小程序的手势密码 WXCustomSwitch 微信小程序自定义 Switch 组件模板 WeixinAppBdNovel 微信小程序demo:百度小说搜索 sh ...

随机推荐

  1. Python自动化测试面试题-Selenium篇

    目录 Python自动化测试面试题-经验篇 Python自动化测试面试题-用例设计篇 Python自动化测试面试题-Linux篇 Python自动化测试面试题-MySQL篇 Python自动化测试面试 ...

  2. C++第四十五篇 -- MFC关闭调用的窗口

    调用窗体的方法: // chart是一个MFC的窗体类 chart *chartdialog = new chart; //调用窗体,获取返回值 int ReturnValue = chartdial ...

  3. intouch 趋势图Y轴自适应功能完善

    在项目中有利用到历史趋势,其y轴往往展示的是该点的最小/最大值范围,对于曲线波动展示不够友好.故而利用自带方法进行完善,以此记录. Histrend1.MinRange=HTGetAutoScaleV ...

  4. npm命令,nrm命令,n命令, nvm命令

    npm命令 npm/yarn config set registry https://registry.npm.taobao.org 设置淘宝镜像npm/yarn config get registr ...

  5. 免杀mimikatz

    mimikatz源码  下载地址https://github.com/gentilkiwi/mimikatz/releases/tag/2.2.0-20210709 使用vs2019打开工程mimik ...

  6. Session与Cookie的原理以及使用小案例>从零开始学JAVA系列

    目录 Session与Cookie的原理以及使用小案例 Cookie和Session所解决的问题 Session与Cookie的原理 Cookie的原理 Cookie的失效时机 小提示 Session ...

  7. Mybatis-初见

    目录 介绍 示例 搭建环境 创建一个模块 CURD 万能Map 配置解析 环境配置 environments 属性 properties 类型别名 typeAliases 其他配置 映射器 mappe ...

  8. RHCSA_DAY02

    Linux:一切皆文件 分区:/boot:做引导盘 /swap:虚拟内存----最大20gb /data:自己放文件用 /:根分区 - 图形界面:   - Ctrl+Shift +号   //调整命令 ...

  9. 以TiDB热点问题来谈Region的调度流程

    什么是热点问题 说这个话题之前我们先回顾一下TiDB的主要结构和概念. TiDB的核心架构分为TiDB.TiKV.PD三个部分,其中TiKV是一个分布式数据存储引擎用来存储真实的数据,在TiKV中又对 ...

  10. UserControl 加载动画

    效果:实现加载UserControl动画效果 cs代码如下 public class BaseModuleView : UserControl { private TranslateTransform ...