如何用css实线所需要的小三角
2024-09-01 01:42:22
使用css实现三角符号
关于使用css制作三角符号,网上有很多的例子了,在这里只是为了详细的向各位解释一下三角符号的原理
下图,是一个长宽为100px,边框宽度为100px的一个元素,由此可见,在css中上下左右的边框相交处并不是一个直线,所以,可以根据此属性进行编写三角符号
那么如何使用css的该属性来实现三角符号的效果呢,代码如下:
html代码
<body>
<div></div>
</body>
css代码
div:after{
position: absolute;
width: 0px;
height: 0px;
content: " ";
border-right: 100px solid transparent;
border-top: 100px solid #ff0;
border-left: 100px solid transparent;
border-bottom: 100px solid transparent;
}
效果图:
这种方法是使用的伪类来实现的三角符号,然后使用绝对定位,不会占用空间
transparent是透明色,大家如果想要的三角符号的方向不一样,只需将对应方向的边框颜色加上,其他的改为透明色即可
最新文章
- [读书笔记]Java之静态分派
- 计算机网路之动态NAT配置
- 数据库配置文件 conf.properties
- 深入C#数据类型小部分第二章
- [java学习笔记]java语言基础概述之内存的划分&;堆和栈
- JNDI学习总结(二)——Tomcat下使用C3P0配置JNDI数据源
- SGU 125.Shtirlits
- Apache配置多个监听端口和不同的网站目录的简单方法(转)
- 西门子PLC学习笔记二-(工作记录)
- android JSON数据格式 解析
- JavaScript Hoisting
- 微信小程序常见的坑
- cmdb部署
- [转] 常用Loss函数
- H5 audio标签
- centos6.5安装/升级到python2.7
- Android 解析未知格式的json数据
- 小程序css--view标签下英文不换行,中文会自动换行
- tomcat支持https的server.xml配置
- 使用托管快照创建作为 Azure 托管磁盘存储的 VHD 的副本