一、箭头产生的原理

 
  1. #demo12 {

  2. border: 100px solid;

  3. border-color:green blue orange red;

  4. 100px;

  5. height:100px;

  6. }

  7. <div id="demo12"></div>

第一步:设置一个div,然后给他设置样式:边框100px,上右下左颜色分别为绿、蓝、橘、红。然后设置div的高度和长度均为100px。

效果图如下:

第二步:我们可以看到中间一个正方形,就是我们设置的长和框:100px*100px。假如把width和height都设置成0的话,会有什么样的情景呢?

content拿掉后,其实就是变成一个点了,然后就变成下图了:

第三步:三角形是不是有了?而且还有四个,这时我们只需要取其中想要的任意一个方向的三角形即可。

比如我们要取绿色的三角形。看好了,一句话就出来了:

将上面的代码修改一行代码:

border-color:green transparent transparent transparent;

同理,如果你要取蓝色的、橘色的、红色的,改变第一个颜色值即可。

除了获取上面三角形以外,我们还可以获取上面每个三角形的一半,也就是一个小的三角形(left或right):

这时,我们再加一行代码即可获取:

 
  1. #demo12 {

  2. border: 100px solid;

  3. border-color:green transparent transparent transparent;

  4. border-left:transparent;

  5. 0px;

  6. height:0px;

  7. }

 加上border-left:transparent;后,我们可以获取right的部分,结果如下:

二 、箭头在实际应用中的使用和实现

㈠一个梯形    

 当元素宽、高和边框的宽相近(等)时,改变某一边的颜色可以看到一个梯形:

 
  1. <div id="demo11"></div>

  2. <style>

  3. #demo2 {

  4. border: 10px solid #000;

  5. border-left-color: #f00;

  6. width: 10px;

  7. height: 10px;

  8. }

  9. </style>

 

㈡三角形

当元素宽、高为零,且其他边为透明颜色时,可以形一个三角形:

 
  1. <div id="demo12"></div>

  2. <style>

  3. #demo12 {

  4. border: 10px solid #000;

  5. border-left-color: #f00;

  6. width: 0;

  7. height: 0;

  8. }

  9. </style>

 

㈢任意角度三角形

改变各个边的宽度,即通过调整“边框”厚度可以配置出任意角度:

 
  1. <div id="demo14"></div>

  2. <style>

  3. #demo14 {

  4. border: 10px solid transparent;

  5. border-left: 20px solid #f00;

  6. width: 0;

  7. height: 0px;

  8. }

  9. </style>

 ㈣三角形跟矩形组合成提示框

 
  1. <div id="demo"></div>

  2. <style>

  3. #demo {

  4. width: 100px;

  5. height: 100px;

  6. background-color: #ccc;

  7. position: relative;

  8. border: 4px solid #333;

  9. }

  10. #demo:after, #demo:before {

  11. border: solid transparent;

  12. content: ' ';

  13. height: 0;

  14. left: 100%;

  15. position: absolute;

  16. width: 0;

  17. }

  18. #demo:after {

  19. border-width: 9px;

  20. border-left-color: #ccc;

  21. top: 15px;

  22. }

  23. #demo:before {

  24. border-width: 14px;

  25. border-left-color: #333;

  26. top: 10px;

  27. }

  28. </style>

㈤三角线分割的 Tab 页

 
  1. <ul id="demo17">

  2. <li> Tab1</li>

  3. <li> Tab2</li>

  4. <li> Tab3</li>

  5. </ul>

  6. <style>

  7. #demo17{

  8. font-size: 10px;

  9. height: 24px;

  10. }

  11. #demo17 li {

  12. float: left;

  13. position: relative;

  14. list-style: none;

  15. margin: 0 20px 12px -19px;

  16. border-top: solid 1px #ddd;

  17. border-bottom: solid 1px #ddd;

  18. padding-left: 12px;

  19. }

  20. #demo17 li:after, #demo17 li:before {

  21. border: 10px solid transparent;

  22. border-left: 10px solid #fff;

  23. width: 0;

  24. height: 0;

  25. position: absolute;

  26. top: 0;

  27. right: -18px;

  28. content: ' '

  29. }

  30. #demo17 li:before {

  31. border-left-color: #ddd;

  32. right: -19px;

  33. }

  34. </style>

 

㈥一个向右的箭头

我们将top、right、bottom均设置为透明色即可获得

 
  1. #demo12 {

  2. border: 10px solid;

  3. border-color:transparent transparent transparent orange;

  4. 0px;

  5. height:0px;

  6. }

 ㈦我们从上面的四个三角形中,把bottom的三角形去掉即可,也就是把bottom的三角形设置为透明色:

 
  1. #demo13 {

  2. border: 50px solid;

  3. border-color:orange orange transparent orange;

  4. 0px;

  5. height:0px;

  6. }

㈧两个向右的三角形叠加而成

设置2个div,其中一个相对定位,另外一个绝对定位,这样就可以控制两个div的位置了。

然后获取2个div的右向箭头即可。talk is cheap,show me the code!

 
  1. .demo14{

  2. border: 50px solid;

  3. border-color:transparent transparent transparent orange;

  4. 0px;

  5. height:0px;

  6. }

  7. .demo12 {

  8. position:relative;

  9. float:left;

  10. }

  11. .demo13 {

  12. position:absoulte;

  13. margin-top:-52px;

  14. }

  15. <div class="demo demo12">

  16. <div class="demo demo13"></div>

  17. </div>

 

Logo

开放原子开发者工作坊旨在鼓励更多人参与开源活动,与志同道合的开发者们相互交流开发经验、分享开发心得、获取前沿技术趋势。工作坊有多种形式的开发者活动,如meetup、训练营等,主打技术交流,干货满满,真诚地邀请各位开发者共同参与!

更多推荐