css画三角形,对角 √ 勾形
.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画三角形,对角 √ 勾形的更多相关文章
- css画三角形原理解析
<div id="div1"></div><div id="div2"></div><div id=&qu ...
- 纯css画三角形
纯css画三角形与border元素相关 设置border的属性 width: 100px; height: 100px; border-style: solid; border-width: 100p ...
- CSS画三角形引发的一些思考
今天刷知乎时看到了一个问题,有谁能详细讲一下css如何画出一个三角形?怎么想都想不懂? - 知乎.很巧,刚入前端坑的我前不久也遇到过这个问题,今天再来谈一谈这个问题则是因为知乎的一些答案引发了我的 ...
- HTML 和 CSS 画三角形和画多边行基本原理及实践
基本 HTML 标签 <div class = 'test'></div> 基本 CSS 代码 .test { width: 100px; height: 100px; bac ...
- 如何用CSS画三角形
很多时候页面都需要一个或者多个小型三角形!多数人直接用PS扣个图片预览 下面用CSS简单画几个最终效果如下图 <div class="border-all-color"> ...
- 理解纯CSS画三角形
pure css draw a triangle code { display: inline-block; width: 300px; background-color: #E0E0E0 } .te ...
- 用css画三角形
当我们给某个图片做一个弹出层的时候,假设要让我们的弹出层显示一个小箭头,能够用css来画 用div来演示 div{ border:12px solid; berder-color:transparen ...
- CSS 画三角形、圆
<div class="square"></div> <style> .square { height: 0px; width: 0px; bo ...
- css画三角形,梯形
(根据调节边框的宽度来调节三角形形状) <!DOCTYPE html> <html> <head> <meta http-equiv="Conten ...
- 2016/2/24 css画三角形 border的上右下左的调整 以及内区域的无限变小 边界透明
网页因为 CSS 而呈现千变万化的风格.这一看似简单的样式语言在使用中非常灵活,只要你发挥创意就能实现很多比人想象不到的效果.特别是随着 CSS3 的广泛使用,更多新奇的 CSS 作品涌现出来. 今天 ...
随机推荐
- UCX84X笔记
1. 管脚定义 COMP: 误差放大器补偿引脚.将外部补偿元件连接到此引脚,以修改误差放大器输出.误差放大器内部有电流限制,因此用户可以通过外部强制COMP接地来命令零占空比. UCx84x系列中的误 ...
- 有没有一个适合初学者学习的基于linux的嵌入式综合项目?
一.前言 很多粉丝问我,有没有一个适合初学者学习的嵌入式的Linux的项目? 我之前陆陆续续写过一些适合新手的小项目: <从0写一个<电话号码管理系统>的C入门项目[适合初学者]&g ...
- Ubuntu 设置 FTP 服务
安装 VSFTP 服务 sudo apt install vsftpd 检查配置文件 sudo vim /etc/vsftpd.conf 确保以下配置项正确: #禁止匿名访问 anonymous_en ...
- 一个小小空格问题引起的bug
程序员会遇到一种情况,一个bug排查到最后是由一个很小的问题导致的.在昨天的日常搬砖中遇到一个问题,耽搁了我大半天的时间,最后查明原因让我很无语. 首先介绍一下背景,我是做算法模型训练,目前手上的工作 ...
- manim边学边做--带箭头直线
带箭头的直线就是有方向的直线,既可以用来表示矢量,也可以用来标记某个关键位置.manim中提供了4种常用的带箭头的直线模块: Arrow:单箭头的直线 DoubleArrow:双箭头的直线 Label ...
- 痞子衡嵌入式:在MDK开发环境下自定义安装与切换不同编译器版本的方法
大家好,我是痞子衡,是正经搞技术的痞子.今天痞子衡给大家分享的是在MDK开发环境下自定义安装与切换不同编译器版本的方法. Keil MDK 想必是嵌入式开发者最熟悉的工具之一了,自 2005 年 Ar ...
- JS常见的API扩展形式(prototype、jquery、vue插件封装)以及怎样设计出易扩展的表单验证功能?
常见的API扩展形式 prototype 比如我现在有一个需求,给定一个字符串,给方法传递一个参数为数字类型来确定当前字符串重复次数,例如: 'abc'.repeatStringNumTimes(3) ...
- Angular 18+ 高级教程 – Component 组件 の Attribute Directives 属性型指令
介绍 指令就是没有模板的组件.除了模板其它的都有,比如 selector.inject.@Input.lifecycle 等等. 那既然都有完整的组件了,为什么还搞一个少掉模板的指令呢? 很简单啊,因 ...
- ASP.NET Core – 网站发布要做的事儿 Publish, Minification, Compression, Cache, HSTS, URL Rewrite Https & www, Close IIS Feature
前言 要发布网站需要做一些优化, 比如 cache, compression, minification 等等. 以前有写过相关的文章: Asp.net core 学习笔记 ( IIS, static ...
- docker安装及基本的镜像拉取
docker 使用存储库安装 卸载它们以及相关的依赖项. yum remove docker \ docker-client \ docker-client-latest \ docker-commo ...