css-border属性的用法：利用cssborder属性制作一个三角形

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了css-border属性的用法：利用cssborder属性制作一个三角形，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含2901字，纯文字阅读大概需要5分钟。

内容图文

我们先来看一看css border属性所实现的效果:

 <style>
div{
    width: 100px; height: 50px;
    border: 30px solid red;
    border-right-color: green;
    border-bottom-color: blue;
    border-left-color:yellow;
    }
</style>

<div></div>

效果如下：

当我们把方框的宽度降低时,代码如下:

<style>
div{
    width: 20px; height: 50px;
    border: 20px solid red;
    border-right-color: green;
    border-bottom-color: blue;
    border-left-color: yellow;
    }
</style>

<div></div>

效果如下：

当我们把元素宽高去掉后,代码如下:

<style>
div{
    width: 0; 
    border: 50px solid red;
    border-right-color: green;
    border-bottom-color: blue;
    border-left-color: yellow;
    }
</style>

<div></div>

效果如下：

此时我们发现当元素的宽高为0时就会变成挤在一起的四个三角形。因此，如果把其中的三条边框的颜色定义为透明色transparent,那么我们就会得到一个三角形！

将三条边框的颜色设置为透明色：

<style>
p{
    width: 0;
    border: 20px solid transparent;
    border-top-color: blue;
}
</style>

<p></p>

运行效果如下：

通过代码我们发现小三角的朝向是与设置了不透明颜色的那条边名字相反的方向。

例如，我们设置了border-top-color: blue; 小三角的朝向是朝下的。

提示:

在我们使用小三角时，因为四条边框组成了一个矩形，我们只是将其他三条边设置了透明色，它们仍然在文档里占据着位置，为了方便布局，我们可以设置小三角相对的那条边为none；具体原理如下：

<style>
div{
   width: 0; height: 0;
   border-top: 20px solid blue;
   border-left: 20px solid red;
   border-right: 20px solid green;
   border-bottom: none;
  }
</style>

<div></div>

运行效果如下：

div{
  width: 0; 
   border:20px solid transparent;
   border-top: 20px solid blue;
   border-bottom: none;
}

<div></div>

运行效果如下：

应用：

当我们要制作这种布局时，可以用此种方法制作小三角，不必再用img或backgroud去实现。

<style>
       ul {
           overflow: hidden;
       }
       
       li {
           list-style: none;
           line-height: 60px;
           text-align: center;
           float: left;
           width: 120px;
           background: #f1f1f1;
           margin-right: 1px
       }
       
       li p {
           width: 0;
           border: 8px solid transparent;
           border-bottom-color: #666;
           border-top: none;
           float: right;
           margin: 26px 10px 0 0
       }
   </style>

   <ul>
       <li>我的课程<p></p></li>
       <li>我的老师<p></p></li>
       <li>学习时长<p></p></li>
   </ul>

运行效果如下：

扩展一下：

<style>
   div{
       margin: 50px
   }
   div:nth-child(1){
       width: 0;
       border: 30px solid transparent;
       border-bottom: 80px solid red;
       /* border-top: none; */
   }
   div:nth-child(2){
       width: 0;
       border-top: 30px solid blue;
       border-right:none;
       border-left: 90px solid transparent;
       border-bottom: none;
   }
   div:nth-child(3){
       width: 0;
       border-top: 30px solid blue;
       border-right:90px solid transparent;
       border-left: 10px solid transparent;
       border-bottom: none;
   }
</style>

   <div></div>
   <div></div>
   <div></div>

运行效果如下：

相关文章推荐:

CSS border-left-color属性_html/css_WEB-ITnose

CSS border边框属性教程(color style)

相关课程推荐:

CSS深入理解之border视频教程

以上就是css-border属性的用法：利用css border属性制作一个三角形的详细内容，更多请关注Gxl网其它相关文章！

内容总结

以上是互联网集市为您收集整理的css-border属性的用法：利用cssborder属性制作一个三角形全部内容，希望文章能够帮你解决css-border属性的用法：利用cssborder属性制作一个三角形所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端