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 作品涌现出来. 今天 ...
随机推荐
- SMU 2024 spring 天梯赛4
SMU 2024 spring 天梯赛4 7-1 心理阴影面积 - SMU 2024 spring 天梯赛4 (pintia.cn) 由 \(d = \frac{Ax+By+c}{\sqrt {A^2 ...
- 树莓派CM4(二): UART/IIC/SPI调试
1. 参考资料 资料汇总页面 https://shumeipai.nxez.com/raspberry-pi-datasheets <bcm2711-peripherals.pdf>,下载 ...
- Telegram第三方登录步骤
网上看到的不多,简单做个记录,本文主要对下面的文章做补充 Telegram(电报)授权登录(web)第三方 整体步骤为: 找 botFather 创建机器人 给机器人设置域名白名单,用于设置回调地址, ...
- 变分信息瓶颈 (Variational Information Bottleneck) 公式推导
互信息 互信息用于表示两个随机变量相互依赖的程度.随机变量 \(X\) 和 \(Y\) 的互信息定义为 \[\begin{aligned} I(X, Y) & = \mathrm{KL}[p( ...
- Oracle数据库自动备份
1.bat脚本 格式为ANSI格式 set CURDATE=%date:~0,4%%date:~5,2%%date:~8,2% set CURMON=%date:~0,4%%date:~5,2% se ...
- Linux 网络设备命名规则
在 Linux 系统中,网络接口的命名规则已经经历了几次重要变化,特别是从传统的以 eth 和 wlan 开头的名称,转变到更现代.更具描述性的命名方式.以下是这些变化的概述: 1. 传统命名约定 在 ...
- 一个开源、跨平台的.NET UI框架 - Avalonia UI
前言 今天大姚给大家分享一个开源.免费(MIT License).跨平台的.NET UI框架:Avalonia UI. Avalonia是一个成熟稳定的平台,用于构建桌面.嵌入式.移动的和Web应用程 ...
- 15 Python模块
本篇是 Python 系列教程第 15 篇,更多内容敬请访问我的 Python 合集 一个模块其实就是一个文件(以.py结尾).使用模块的好处是便于维护和重用代码. 要创建一个模块,只需编写一个新的文 ...
- 使用 Performance API 实现前端资源监控
1. Performance API 的用处 Performance API 是浏览器中内置的一组工具,用于测量和记录页面加载和执行过程中的各类性能指标.它的主要用处包括: 监控页面资源加载:跟踪页面 ...
- C# – class, filed, property, const, readonly, get, set, init, required 使用基础
前言 心血来潮,这篇讲点基础的东西. Field 比起 Property,Field 很不起眼,你若问 JavaScript,它甚至都没有 Field. 但在 C#,class 里头真正装 value ...