.selected{
border-color: #5FB878;
} .selected:after {
content: "";
position: absolute;
top: 0;
right: 0;
border-top: 30px solid #5FB878;
border-left: 30px solid transparent;
} .selected:before {
content: '';
position: absolute;
width: 14px;
height: 8px;
background: transparent;
top: 4px;
right: 1px;
border: 2px solid white;
border-top: none;
border-right: none;
-webkit-transform: rotate(-55deg);
-ms-transform: rotate(-55deg);
transform: rotate(-55deg);
z-index: 9;
}

  最终效果

css画三角形,对角 √ 勾形的更多相关文章

  1. css画三角形原理解析

    <div id="div1"></div><div id="div2"></div><div id=&qu ...

  2. 纯css画三角形

    纯css画三角形与border元素相关 设置border的属性 width: 100px; height: 100px; border-style: solid; border-width: 100p ...

  3. CSS画三角形引发的一些思考

      今天刷知乎时看到了一个问题,有谁能详细讲一下css如何画出一个三角形?怎么想都想不懂? - 知乎.很巧,刚入前端坑的我前不久也遇到过这个问题,今天再来谈一谈这个问题则是因为知乎的一些答案引发了我的 ...

  4. HTML 和 CSS 画三角形和画多边行基本原理及实践

    基本 HTML 标签 <div class = 'test'></div> 基本 CSS 代码 .test { width: 100px; height: 100px; bac ...

  5. 如何用CSS画三角形

    很多时候页面都需要一个或者多个小型三角形!多数人直接用PS扣个图片预览 下面用CSS简单画几个最终效果如下图 <div class="border-all-color"> ...

  6. 理解纯CSS画三角形

    pure css draw a triangle code { display: inline-block; width: 300px; background-color: #E0E0E0 } .te ...

  7. 用css画三角形

    当我们给某个图片做一个弹出层的时候,假设要让我们的弹出层显示一个小箭头,能够用css来画 用div来演示 div{ border:12px solid; berder-color:transparen ...

  8. CSS 画三角形、圆

    <div class="square"></div> <style> .square { height: 0px; width: 0px; bo ...

  9. css画三角形,梯形

    (根据调节边框的宽度来调节三角形形状) <!DOCTYPE html> <html> <head> <meta http-equiv="Conten ...

  10. 2016/2/24 css画三角形 border的上右下左的调整 以及内区域的无限变小 边界透明

    网页因为 CSS 而呈现千变万化的风格.这一看似简单的样式语言在使用中非常灵活,只要你发挥创意就能实现很多比人想象不到的效果.特别是随着 CSS3 的广泛使用,更多新奇的 CSS 作品涌现出来. 今天 ...

随机推荐

  1. python连接钉钉自动化提交OA审批

    一.准备工作 1.安装阿里云支持包,点击跳转:https://open.dingtalk.com/document/resourcedownload/download-server-sdk 2.注册钉 ...

  2. 12-es6类的方式封装折线图

    1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="U ...

  3. diff 输出解释

    diff 最原始的 diff 我们先编写两个文件: f1: 1 2 3 4 5 6 7 8 9 f2: 1 2 3 4 5 66 7 8 9 然后我们进行比较: diff f1 f2 6c6 < ...

  4. AI产品经理的探索:技能、机遇与未来展望

    Ai时代的产品经理 随着人工智能(AI)的飞速发展,AI已经从一个前沿技术概念逐步演变为驱动各行业创新的核心力量.从智能助手到自动驾驶,从个性化推荐系统到图像识别,AI正在以不可思议的速度改变着我们的 ...

  5. kafka部署配置及常用命令总结(运维必备)

    kafka部署配置及常用命令总结 部署配置 1.准备部署包(自行下载) 2.配置zk vim conf/zoo.cfg dataDir=/data/vfan/zk/data/ dataLogDir=/ ...

  6. 使用Golang的协程竟然变慢了|100万个协程的归并排序耗时分析

    前言 这篇文章将用三个版本的归并排序,为大家分析使用协程排序的时间开销(被排序的切片长度由128到1000w) 本期demo地址:https://github.com/BaiZe1998/go-lea ...

  7. 根据Uri,Cursor没有获取到对应的属性

    Android: 背景:调用摄像头,拍摄视频,指定保存的地址,但是返回的Cursor文件,只有名称和大小的属性,没有其他诸如时长,连ID属性都没有 使用 cursor.getInt(cursor.ge ...

  8. C# SAPX调用用户控件方法

    //获得用户控件            Type pageType = ucMoneyList1.GetType();             //用户控件方法名            MethodI ...

  9. SQL Server – 执行计划和各种 join 方式 (Execution plan & Join Pattern)

    前言 我几乎从来没有遇到过性能问题, 毕竟项目真的太小了. 一般上只要用常识去建 index 就可以了. 但是这并不阻碍我对知识的追求. 这篇是关于一些性能优化和原理的内容. 纯属学习, 希望未来有机 ...

  10. MonoDevelop 的续集dotdevelop

    DotDevelop 是一个跨平台的 .NET 集成开发环境(IDE),它原本是 MonoDevelop 的分支项目,这个项目更侧重于 Linux 支持和 GTK3 升级,github:https:/ ...