css写带边框的三角形
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>DEMO</title> <style> .demo{ width: 200px; height: 200px; /*background-color: #999;*/ margin: 0 auto; } .tri{ display: block; width: 20px; height: 20px; position: relative; left: 10px; /*border: 1px solid green;*/ } .tri:before,.tri:after{ content: ""; display: block; position: absolute; left: 0; top: 0; border-width: 10px; border-color: transparent transparent red transparent; border-style: dashed dashed solid dashed; } .tri:after{ margin-top: 1px; border-color: transparent transparent white transparent; } .tri.active:before{ border-color: transparent transparent green transparent; } </style> </head> <body> <div class="demo"> <span class="tri active"></span> </div> </body> </html>
css写带边框的三角形的更多相关文章
- css挤带边框的三角
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...
- 纯css写带小三角对话框
在实际样式中经常会遇到要写类似对话框的样式,而这种样式往往会有一个小三角,如下所示: 那么如何用css写出来呢,其实很简单,先让父元素相对定位,然后运用css的伪类before或after.就可以写个 ...
- CSS实现带阴影效果的三角形
具体实现 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta ...
- 还在为小三角形切图?使用纯CSS写一个简单的三角形
同学们,当美工给的设计图是这样: 或者这样: 我的内心其实是拒绝的-_-:但工作还得干,大部分同学会写 <style> .icon{width:20px;height:20px;displ ...
- css实现div左侧突出一个带边框的三角形
.vip-control-header{ width: 600px; height: auto; background: #F8F8F8; border: 1px solid #e2e2e2; pad ...
- html5 css写出一个实心三角形和空心三角行
原理:css中的border属性的特殊性. 实心三角形: html5: <div id="mydiv"></div> css: #mydiv{ height ...
- 利用css制作带边框的小三角
标签(空格分隔):css 在项目中会使用到的小实例,目前知道的有两种方法来实现 设置元素的宽和高,利用rotate实现,比较简单的一种 div{ width: 10px; height: 10px; ...
- css实现带边框的冒泡提示框
需求是实现这种效果, 因为内容是动态的,使用图片不是很好: 原因: 如果内容确定只是一行,可以效果图裁剪3部分,分别是两侧和中间部分,然后用backgroud插入三张图片,但是要是内容是2行就不好处理 ...
- CSS九宫格带边框的多种实现
九宫格,每个单元格滑动上去显示完整边框. 本身考察的知识点并不复杂,margin负值的遮挡,以及流布局中relative的超越. 代码固定部分是这样的, <div> <div> ...
随机推荐
- 【剑指offer】题目36 数组中的逆序对
数组中任取两个数字,如果前面的数字大于后面的数字称为一个逆序对 如:1,2,1,2,1 有3个逆序对 思路:知道O(N2)肯定是错的.开始想hash,试图找到O(n)的算法,想了很久,找不到.后来想到 ...
- 【linux】vim的一些快捷键
ctrl+y :重复上一行内容 v+移动光标 :选择内容 y :复制选中的内容 p :在光标处粘贴复制的内容 ctrl+v :进入列模式,可以选择多列数据 dd :剪切一行,也可做删除一行使用
- HDU 1159 Common Subsequence --- DP入门之最长公共子序列
题目链接 基础的最长公共子序列 #include <bits/stdc++.h> using namespace std; ; char c[maxn],d[maxn]; int dp[m ...
- 【Excel 4.0 函数】REGISTER 的两种形式以及VBA等效语句
形式1 REGISTER("SAMPLE.DLL", "MyFunction", "AIC") 形式1等效 VBA语句 Declare Fu ...
- 60. Permutation Sequence
题目: The set [1,2,3,…,n] contains a total of n! unique permutations. By listing and labeling all of t ...
- Android笔记:实现点击事件
布局文件声明控件 .java文件获取控件 1. button.setOnClickListener(new View.OnClickListener() { @Override ...
- sqlite建表语句(特别是外键问题)
原创 sqlite建表语句(特别是外键问题) 下面图表示两个表关系: //表1User_invitecreate table User_invite(Invite_id INTEGER PRIMAR ...
- 第一课 移动端&响应式
一.调试工具介绍(Chrome Emulation) 1.Device(设备相关) 自定义尺寸.Network(网络模拟).UseAgent(浏览器信息).缩放 2.Media(媒体) 3.Netwo ...
- tableView 局部刷新
//一个section刷新 NSIndexSet *indexSet=[[NSIndexSet alloc]initWithIndex:2]; [tableview reloadSections:in ...
- jquery.query.js 插件(示例及简单应用)
帮助文档 var url = location.search; > "?action=view§ion=info&id=123&debug&te ...