使用before、after伪类制作三角形
使用before、after伪类实现三角形的制作,不需要再为三角形增加不必要的DOM元素,影响阅读。
<!DOCTYPE html>
<html>
<head>
<style>
div{
width: 100px;
height: 100px;
border: 1px solid #ccc;
}
div:before,
div:after{
content: "";
position: absolute;
top: 40px;
left: 100px;
width: 0px;
height: 0px;
border: 10px solid transparent;
border-left-color: rgb(255,255,255);
}
div:before{
top: 39px;
border: 11px solid transparent;
border-left-color: #ccc;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
使用before、after伪类制作三角形的更多相关文章
- 用css伪类制作三角形的三种方法
在手机上写三角形的时候,我一般都用伪类,刚开始的时候用的图片,但是在现在的手机高清屏幕上,图片容易失真,还是用伪类吧! 第一种:一个90度的“ > ”, 只有线条.(可以做下拉框的箭头之类的) ...
- 巧用CSS3 :target 伪类制作Dropdown下拉菜单(无JS)
:target 是CSS3 中新增的一个伪类,用以匹配当前页面的URI中某个标志符的目标元素(比如说当前页面URL下添加#comment就会定位到id=“comment”的位置,俗称锚).CSS3 为 ...
- 巧用CSS3:target 伪类制作Dropdown下拉菜单(无JS)
原文链接:http://devework.com/css3-target-dropdown.html :target 是CSS3 中新增的一个伪类,用以匹配当前页面的URI中某个标志符的目标元素(比如 ...
- CSS-用伪类制作小箭头(轮播图的左右切换btn)
先上学习地址:http://www.htmleaf.com/Demo/201610234136.html 作者对轮播图左右按钮的处理方法一改往常,不是简单地用btn.prev+btn.next的图片代 ...
- :target伪类制作tab选项卡
:target伪类的作用是突出显示活动的HTML锚,下面是一个简单的例子: HTML代码: <div> <a href="#demo1">点击此处</ ...
- 利用:before和:after伪类制作类似微信对话框
今天学到了怎么做一个小三角形,进而结合其他属性把类似微信对话框的图形做出来了. 先做出如下形状: .arrow { width: 30px; height:30px; border-width:20p ...
- 利用:before和:after伪类制作CSS3 圆形按钮 含demo
要求 必备知识 基本了解CSS语法,初步了解CSS3语法知识. 开发环境 Adobe Dreamweaver CS6 演示地址 演示地址 预览截图(抬抬你的鼠标就可以看到演示地址哦): 制作步骤: 一 ...
- 用CSS伪类制作一个不断旋转的八卦图?
前言 介绍一下如何制作一个不断旋转的八卦图.快速预览代码及效果,点击:八卦图 代码如下: HTML部分 <!DOCTYPE html> <html> <head> ...
- afert和b的伪类画三角形
/* 提示信息 */ .content-tishi{ width: 6.93rem; margin: 0 auto; background: #e9eaea; display: flex; flex- ...
随机推荐
- 在线教学、视频会议 Webus Fox(2) 服务端开发手册
上次在<在线教学.视频会议软件 Webus Fox(1)文本.语音.视频聊天及电子白板基本用法>里介绍了软件的基本用法.本文主要介绍服务器端如何配置.开发. 1. 配置 1.1 IIS配置 ...
- [OpenCV] 4、图像叠加 addWeighted
>_<" 这次主要是图像叠加的基本操作: >_<" cv::addWeighted(imageROI, 1.0, logo, 0.6, 0, imageRO ...
- [异常] Download interrupted: Connection to https://dl-ssl.google.com refused 安卓SDK下载被拒 3步解决
1.SDK Manager 的 Tools ->Options打开SDK Manager的Settings,选中“Force https://… sources to be fetched us ...
- html5之canvas画图
导航 前言 基本知识 绘制矩形 清除矩形区域 圆弧 路径 绘制线段 绘制贝塞尔曲线 线性渐变 径向渐变(发散) 图形变形(平移.旋转.缩放) 矩阵变换(图形变形的机制) 图形组合 给图形绘制阴影 绘制 ...
- [ThingWorx] Install Guideline
环境 硬件 软件 安装过程 PostgreSQL Tomcat ThingWorx
- Cmd命令
write----------写字板 mspaint--------画图板 mobsync--------同步命令 eudcedit-------造字程序 dvdplay--------DVD播放器 ...
- java web图片显示到浏览器
今天研究了一下午,图片显示问题. jsp中获取绝对路径的方法:String contextPath = request.getContextPath();String path = request.g ...
- BeginInvoke与EndInvoke方法解决多线程接收委托返回值问题
BeginInvoke与EndInvoke方法解决多线程接收委托返回值问题 原文:http://www.sufeinet.com/thread-3707-1-1.html 大家可以先看看我上 ...
- Spring框架下的 “接口调用、MVC请求” 调用参数、返回值、耗时信息输出
主要拦截前端或后天的请求,打印请求方法参数.返回值.耗时.异常的日志.方便开发调试,能很快定位到问题出现在哪个方法中. 前端请求拦截,mvc的拦截器 import java.util.Date; im ...
- Revit利用对正工具快速修改风管对齐方式
绘制风管的时候,可以对风管的对正方式进行设置,水平方向可以设置左对齐或者中心对齐或者右对齐,垂直方向可以设置为顶对齐或者中心对齐或者低对齐,如果需要对原来的对齐方式进行修改的时候应该如何操作呢?比如, ...