.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. 圣诞节快乐,教你用shell脚本实现一颗圣诞树。【小酷炫】

    前言 圣诞节到了! 一口君在这祝各位粉丝朋友圣诞节快乐! 祝各位考研的同学金榜题名! 祝找工作的朋友offer接到爆! 祝各位老板新年大发财源! 在此一口君特地用shell脚本画了一个圣诞树! 先来看 ...

  2. 一加8t救砖教程

    关机 按住音量上下和电源键 重启到fastboot 取到原系统boot ./fastboot flash boot_a boot.img ./fastboot flash boot_b boot.im ...

  3. 折腾 Quickwit,Rust 编写的分布式搜索引擎-官方教程

    快速上手 在本快速入门指南中,我们将安装 Quickwit,创建一个索引,添加文档,最后执行搜索查询.本指南中使用的所有 Quickwit 命令都在 CLI 参考文档 中进行了记录. https:// ...

  4. Consul初探-从安装到运行 【转】

    目录 前言 下载二进制包 入门必学必记文档 启动 Consul 前言 伟人说过:实践是检验真理的唯一标准!经过上一篇的学习,我基本掌握了 Consul 的基本原理,接下来就是动手实践了:Consul ...

  5. 小tips:vue2中broadcast和dispatch的实现

    /* * broadcast 事件广播 * @param {componentName} 组件名称 * @param {eventName} 事件名 * @param {params} 参数 * 遍历 ...

  6. JavaScript – Temporal API & Date

    前言 Temporal API 是 JS 的新东西,用来取代 Date.虽然现在 (12-09-2024) 依然没有任何游览器支持 Temporal API,但它已经是 stage 3 了,而且有完整 ...

  7. CSS – Variables

    参考: Youtube – CSS Variables - CSS vs Sass - variables inside media queries Why we prefer CSS Custom ...

  8. JAVAEE——navicat安装

    Navicat Premium 15激活步骤 准备 Navicat Premium 15.Navicat Premium 15注册机 用到的都放在这里了: 链接:https://pan.baidu.c ...

  9. C# WebSocket Servers -- Fleck、SuperSocket、TouchSocke

    最近在维护老项目,感觉内存一直都有问题,定位到问题是WebSocketServer的问题,了解了 Fleck.SuperSocket.TouchSocke 等开源项目,这里记录一下. .net5..n ...

  10. 【赵渝强老师】Docker Swarm实现服务的滚动更新

    一.什么是Docker Swarm? Docker Swarm是Docker官方提供的一款集群管理工具,其主要作用是把若干台Docker主机抽象为一个整体,并且通过一个入口统一管理这些Docker主机 ...