首页 > 代码库 > border的特殊用法

border的特殊用法

2024-09-18 06:50:47   220人阅读

大家很容易在一些网页上看到二级菜单上有一个小的三角形，这个小三角型 除了可以使用图片或者使用iconfont写出来，还可以使用border写出来

这边简单的为大家举一个例子，希望对大家有用吧！

css样式为：

  1      *{
  2             margin:0;
  3             padding:0;
  4         }
  5         .box{
  6             position: relative;
  7             margin:100px 400px;
  8             animation: move1 4s linear infinite;
  9         }
 10         .box div{
 11             /*opacity: 0.6;*/
 12         }
 13         .box1{
 14             border-left:200px solid red;
 15             border-right:200px solid transparent;
 16             border-bottom:200px solid transparent;
 17             content:" ";
 18             width:0;
 19             height:0;
 20         }
 21         .box2{
 22             border-left:200px solid transparent;
 23             border-right:200px solid yellow;
 24             border-bottom:200px solid transparent;
 25             content:" ";
 26             width:0;
 27             height:0;
 28             position: absolute;
 29             top:0;
 30         }
 31         .box3{
 32             border-left:200px solid transparent;
 33             border-right:200px solid green;
 34             border-bottom:200px solid transparent;
 35             content:" ";
 36             width:0;
 37             height:0;
 38             transform: translateX(-200px);
 39             transform: rotate(180deg);
 40         }
 41         .box4{
 42             border-left:200px solid transparent;
 43             border-right:200px solid palevioletred;
 44             border-bottom:200px solid transparent;
 45             content:" ";
 46             width:0;
 47             height:0;
 48             position: absolute;
 49             top:100px;
 50             left: 100px;
 51             transform: rotate(90deg);
 52         }
 53         .box5{
 54             border-left:200px solid blueviolet;
 55             border-right:200px solid transparent;
 56             border-bottom:200px solid transparent;
 57             content:" ";
 58             width:0;
 59             height:0;
 60             position: absolute;
 61             top:-100px;
 62             left: 100px;
 63             transform: rotate(-90deg);
 64         }
 65         .box6{
 66             border-left:200px solid transparent;
 67             border-right:200px solid yellowgreen;
 68             border-bottom:200px solid transparent;
 69             content:" ";
 70             width:0;
 71             height:0;
 72             position: absolute;
 73             left: -200px;
 74             top:200px;
 75 
 76         }
 77         .box7{
 78             border-left:200px solid red;
 79             border-right:200px solid transparent;
 80             border-bottom:200px solid transparent;
 81             content:" ";
 82             width:0;
 83             height:0;
 84             position: absolute;
 85             top:200px;
 86             left: 200px;
 87 
 88         }
 89         .box8{
 90             border-left:200px solid transparent;
 91             border-right:200px solid blue;
 92             border-bottom:200px solid transparent;
 93             content:" ";
 94             width:0;
 95             height:0;
 96             position: absolute;
 97             top:-100px;
 98             left:-100px;
 99             transform: rotate(90deg);
100 
101         }
102         .boxt{
103             position: relative;
104             top:-400px;
105             animation: move 2s linear infinite;
106         }
107         @keyframes move {
108             from {
109                 transform-origin: 200px 200px;
110                 transform: rotate(0);
111             }
112             to {
113                 transform-origin: 200px 200px;
114                 transform: rotate(360deg);
115             }
116         }
117         @keyframes move1 {
118             from {
119                 transform-origin: 200px 200px;
120                 transform: rotate(360deg) scale(1);
121             }
122             to {
123                 transform-origin: 200px 200px;
124                 transform:rotate(0) scale(1.5);
125             }
126         }

html样式为：

 1 <div class="box">
 2      <div class="box1"></div>
 3      <div class="box2"></div>
 4      <div class="box3"></div>
 5      <div class="box4"></div>
 6      <div class="boxt">
 7          <div class="box5"></div>
 8          <div class="box6"></div>
 9          <div class="box7"></div>
10          <div class="box8"></div>
11      </div>
12  </div>

虽然这里我举例的并不是二级菜单上的小三角，但是你只要明白了这个原理，二级菜单上的小三角直接用border和定位就可以写出来了！

border的特殊用法


联系
我们