CSS基础-如何用border写三角形？

2019-11-29 21:01:45 阅读：258 来源： 互联网

标签：边框 width 10px 三角形 border 20px CSS

1.常用的border的单值属性（border指的是边框。）

/*边框样式属性*/
border-style: solid;
/*边框颜色*/
border-color: #06a43a;
/*边框宽度*/
border-width: 10px;

其中border-style的属性值有三种：
solid（实线），dashed（虚线为方块），dotted(虚线为圆点)
border-style的属性值-效果图

其中颜色，宽度，样式属性值有四个方向。根据值的不同，对应的方向不同
点击查看详情

 border-width:
           四个值：上（10px）右（20px） 下（30px） 左（40px）
           border-width: 10px 20px 30px 40px;

           三个值：上（10px）右（20px） 下（30px） 左（20px）
           border-width: 10px 20px 30px ;

           两个值：上（10px）右（20px） 下（10px） 左（20px）
           border-width: 10px 20px ;

           一个值：上下左右全是10px;
           border-width: 10px;

2.用border边框写三角行

(1)首先查看边框特性，边框交替的位置是斜线
下面是代码，border边框为梯形，点击查看

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>border标签 part2</title>
    <style>
        /*颜色的分割是梯形，不是长方形。*/
       #box{
           width:10px;
           height:10px;
           border: 10px solid ;
           border-color: #06a43a deeppink yellowgreen rebeccapurple;
       }
    </style>
</head>
<body>
 <div id="box"></div>
</body>
</html>

注意：边框交替处为斜边，是个梯形，用此属性写三角形
图片描述

（2）开始用边框写三角形，先将梯形变成三角形。

1.设置宽高为0
2.给border-width设置值.
3.边框设置颜色

梯形转化为三角形

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>border标签 part2</title>
    <style>
        /*设置成三角形*/
        #box1{
            width:0;
            height:0;
            border:40px solid;
            border-color: #06a43a deeppink yellowgreen rebeccapurple;
        }
    </style>
</head>
<body>
 <div id="box1"></div><br/>
</body>
</html>

图片描述

（3）向下三角形

 1.设置div高宽为0
 2.设置border-width值
 3.其余三条边为transparent（透明），视觉效果为下三角。

下三角效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>border标签 part2</title>
    <style>
        /*设置成向下三角形  transparent：透明 */
       #box2{
            width:0px;
            height: 0px;
            border: 40px solid ;
            border-color: #06a43a transparent 
 transparent;
        }
    </style>
</head>
<body>
 <div id="box2"></div>
</body>
</html>

图片描述

标签：边框,width,10px,三角形,border,20px,CSS
来源： https://www.cnblogs.com/jlfw/p/11960247.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

CSS基础-如何用border写三角形？