border的特殊用法
2024-09-24 09:35:47
大家很容易在一些网页上看到二级菜单上有一个小的三角形，这个小三角型 除了可以使用图片或者使用iconfont写出来，还可以使用border写出来
这边简单的为大家举一个例子，希望对大家有用吧！
css样式为：
*{
margin:0;
padding:0;
}
.box{
position: relative;
margin:100px 400px;
animation: move1 4s linear infinite;
}
.box div{
/*opacity: 0.6;*/
}
.box1{
border-left:200px solid red;
border-right:200px solid transparent;
border-bottom:200px solid transparent;
content:" ";
width:0;
height:0;
}
.box2{
border-left:200px solid transparent;
border-right:200px solid yellow;
border-bottom:200px solid transparent;
content:" ";
width:0;
height:0;
position: absolute;
top:0;
}
.box3{
border-left:200px solid transparent;
border-right:200px solid green;
border-bottom:200px solid transparent;
content:" ";
width:0;
height:0;
transform: translateX(-200px);
transform: rotate(180deg);
}
.box4{
border-left:200px solid transparent;
border-right:200px solid palevioletred;
border-bottom:200px solid transparent;
content:" ";
width:0;
height:0;
position: absolute;
top:100px;
left: 100px;
transform: rotate(90deg);
}
.box5{
border-left:200px solid blueviolet;
border-right:200px solid transparent;
border-bottom:200px solid transparent;
content:" ";
width:0;
height:0;
position: absolute;
top:-100px;
left: 100px;
transform: rotate(-90deg);
}
.box6{
border-left:200px solid transparent;
border-right:200px solid yellowgreen;
border-bottom:200px solid transparent;
content:" ";
width:0;
height:0;
position: absolute;
left: -200px;
top:200px;
}
.box7{
border-left:200px solid red;
border-right:200px solid transparent;
border-bottom:200px solid transparent;
content:" ";
width:0;
height:0;
position: absolute;
top:200px;
left: 200px;
}
.box8{
border-left:200px solid transparent;
border-right:200px solid blue;
border-bottom:200px solid transparent;
content:" ";
width:0;
height:0;
position: absolute;
top:-100px;
left:-100px;
transform: rotate(90deg);
}
.boxt{
position: relative;
top:-400px;
animation: move 2s linear infinite;
}
@keyframes move {
from {
transform-origin: 200px 200px;
transform: rotate(0);
}
to {
transform-origin: 200px 200px;
transform: rotate(360deg);
}
}
@keyframes move1 {
from {
transform-origin: 200px 200px;
transform: rotate(360deg) scale(1);
}
to {
transform-origin: 200px 200px;
transform:rotate(0) scale(1.5);
}
}
html样式为：
<div class="box">
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box4"></div>
<div class="boxt">
<div class="box5"></div>
<div class="box6"></div>
<div class="box7"></div>
<div class="box8"></div>
</div>
</div>
虽然这里我举例的并不是二级菜单上的小三角，但是你只要明白了这个原理，二级菜单上的小三角直接用border和定位就可以写出来了！
最新文章
- HTML5中的sessionStorage和localStorage
- Merge Intervals
- 28335 AD 转换
- ptype_base和ptype_all学习笔记
- 【转】Android中的内存管理--不错不错，避免使用枚举类型
- JS~对img标签进行优化，使用onerror进行默认图像显示
- Spring Jdbc使用like模糊查询
- div中央
- Eclipse用法和技巧十：显示代码outline
- Codeforces 374D Inna and Sequence 二分法+树状数组
- Java内存模型四
- Shell命令-文件及内容处理之head、tail
- day 8：open文件和with的使用
- linux timing profile
- HTTP 中 GET 与 POST 的区别
- C#中数据库事务、存储过程基本用法
- linux下导入导出数据库
- Windows 2012r2 以及以上版本远程提示错误的解决方法
- java语言导学(5版)--第12章并发之二
- 补交20145226蓝墨云班课 -- MyCP