1. .selected{
  2. border-color: #5FB878;
  3. }
  4.  
  5. .selected:after {
  6. content: "";
  7. position: absolute;
  8. top: 0;
  9. right: 0;
  10. border-top: 30px solid #5FB878;
  11. border-left: 30px solid transparent;
  12. }
  13.  
  14. .selected:before {
  15. content: '';
  16. position: absolute;
  17. width: 14px;
  18. height: 8px;
  19. background: transparent;
  20. top: 4px;
  21. right: 1px;
  22. border: 2px solid white;
  23. border-top: none;
  24. border-right: none;
  25. -webkit-transform: rotate(-55deg);
  26. -ms-transform: rotate(-55deg);
  27. transform: rotate(-55deg);
  28. z-index: 9;
  29. }

  最终效果

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. vue3的defineAsyncComponent是如何实现异步组件的呢?

    前言 在上一篇 给我5分钟,保证教会你在vue3中动态加载远程组件文章中,我们通过defineAsyncComponent实现了动态加载远程组件.这篇文章我们将通过debug源码的方式来带你搞清楚de ...

  2. 【牛客刷题】HJ6 质数因子

    题目链接 这道题本身更多的是考察如何计算一个数的质数因子,更像是一道数学题,用到了循环的方法: package main import ( "fmt" "math&quo ...

  3. 从海量信息中脱颖而出:Workflow智能分析解决方案,大语言模型为AI科技文章打造精准摘要评分体系(总篇章)

    从海量信息中脱颖而出:Workflow智能分析解决方案,大语言模型为AI科技文章打造精准摘要评分体系(总篇章) 1.简介 该项目整合了编程.AI.产品设计.商业科技及个人成长等多领域的精华内容,源自顶 ...

  4. 使用了 sudo 却依然显示权限不够的原因

    $ sudo echo "151.101.76.133 raw.githubusercontent.com" >> /etc/hosts bash: /etc/host ...

  5. Web刷题之polarctf靶场(1)

    PolarCTF 1.XFF 打开靶场发现需要ip为1.1.1.1的用户才行, 打开BurpSuite进行抓包并对数据包进行修改,根据题目XFF提示 flag{847ac5dd4057b1ece411 ...

  6. “java.lang.NoClassDefFoundError: javax/servlet/jsp/jstl/core/LoopTag”解决方法

    在运行jsp项目的时候出现了这个java.lang.NoClassDefFoundError: javax/servlet/jsp/jstl/core/LoopTag报错,一直尝试更换jar文件等也没 ...

  7. pycharm批量注释

    pycharm批量注释不像是spyder可以鼠标右键选择,pycharm是要用快捷键的,选中要注释的代码,然后快捷键就可以了. 注释代码和取消注释代码的快捷键都一样ctrl + /

  8. 一款超级给力的弱网测试神器—Qnet(附视频)

    一.APP弱网测试背景 App在使用的过程中,难免会遇到不同的弱网络环境,像在公车上.在地铁.地下车库等.在这种情况下,手机常常会出现网络抖动.上行或下行超时,导致APP应用中出现丢包延迟,从而影响用 ...

  9. Flutter 2.8 正式发布

    文/ Tim Sneath,Flutter & Dart 产品经理 Flutter 已经更新到 2.8 正式版,发布了多项新特性和改进以不断改善移动和 Web 端的开发体验,同时也正在将桌面端 ...

  10. 这才是批量update的正确姿势!

    前言 最近我有位小伙伴问我,在实际工作中,批量更新的代码要怎么写. 这个问题挺有代表性的,今天拿出来给大家一起分享一下,希望对你会有所帮助. 1 案发现场 有一天上午,在我的知识星球群里,有位小伙伴问 ...