1. ._left{
  2. position: relative;
  3. margin-top: 40rpx;
  4. width: 40%;
  5. height: 350rpx;
  6. border-radius: 12rpx;
  7. text-align: center;
  8. font-size: 26rpx;
  9. background-color: #FCF2D7;
  10. color: #9F7F43;
  11. border: 2rpx solid #FFC11B;
  12. }
  13.  
  14. ._left:before{
  15. content: '';
  16. display: inline-block;
  17. position: absolute;
  18. right: 0;
  19. top: 0;
  20. width: 0;
  21. height: 0;
  22. border-top: 28px solid #FBCF6B;
  23. border-left: 28px solid transparent;
  24.  
  25. }
  26. ._left:after{
  27. content: '';
  28. position: absolute;
  29. right: 1px;
  30. top: 5px;
  31. width: 8px;
  32. height: 4px;
  33. display: inline-block;
  34. border: 1px solid #fff;
  35. border-width: 0 0 1px 1px;
  36. transform: rotate(-45deg);
  37. -ms-transform: rotate(-45deg);
  38. -moz-transform: rotate(-45deg);
  39. -webkit-transform: rotate(-45deg);
  40. -o-transform: rotate(-45deg);
  41. vertical-align: baseline;
  42. }

微信小程序 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. C++第四十八篇 -- 字符串分离方法

    举例:Test_Bluetooth.exe -param_split Test_Bluetooth.cpp #include "pch.h" #include <iostre ...

  2. Win10离线安装.net3.5

    起因 工作原因需要安装vs2008,但是依赖.net3.5,寻找可以离线安装的版本 尝试 下载.net framework sp1完整包 dotnetfx35.exe 可选下载 语言包 dotnetf ...

  3. xmind8-update9 安装破解激活教程

    xmind8是一款原型图设计流行的软件,相比于xmind2020功能更为丰富,比如画甘特图等.本教程来教大家如何对xmind8 update9进行安装激活,使用全部功能,无限期使用! 只看本文一篇即可 ...

  4. [JS]异步任务之事件循环

    前言 常常会听到单线程和多线程这两个名词,单线程即一个时间段内程序从上到下执行任务,多线程即一个时间段内程序同时执行多个任务. 然而 JavaScript 是单线程的,它不像 Java 那样新开启一个 ...

  5. 数据库建模、面向对象建模>从零开始学java系列

    目录 数据库建模 前置知识 使用PowerDesigner数据库建模设计 一对多CDM概念数据模型设计 多对多的PDM物理数据模型设计(针对mysql) PowerDesigner将不同的模型进行转换 ...

  6. 单片机学习(一)项目的建立和vscode代码编辑环境的设置

    目录 Keil项目的建立 使用vscode进行开发 工欲善其事必先利其器,因此我们先搭建一个比较舒服的开发环境. Keil项目的建立 打开Keil软件点击Project/New uVision Pro ...

  7. CF559B Equivalent Strings TJ

    前言 题目传送门 正解:模拟,递归. 考试的 T4,还是想复杂了 qwq. 这题不要用 STL,容易 \(\texttt{TLE}\)!! 题意简述 翻译够简了. 对了给一下样例解释的翻译: 第一个样 ...

  8. CentOS Linux Cockpit 管理工具使用

    1.安装 # yum install  cockpit 2.启动服务 # systemctl start cockpit.socket 3.设置开机启动 # systemctl enable  coc ...

  9. Python -类型提示 Type Hints

    为什么会有类型提示 Python是一种动态类型语言,这意味着我们在编写代码的时候更为自由,运行时不需要指定变量类型 但是与此同时 IDE 无法像静态类型语言那样分析代码,及时给我们相应的提示,比如字符 ...

  10. system V信号量和Posix信号量

    一.函数上的区别 信号量有两种实现:传统的System V信号量和新的POSIX信号量.它们所提供的函数很容易被区分:对于所有System V信号量函数,在它们的名字里面没有下划线.例如,应该是sem ...