前段学习之**三角制作**

前端学习

前段学习之三角制作

图片展示:
前段学习之**三角制作**_第1张图片
一、三角制作

1.指定一个没有大小的盒子(要求宽和高必须为0,只设置边框长度)



    
"box1">

前段学习之**三角制作**_第2张图片

2.若把四个边框改成不同的颜色



    
"box1">

则如下图所示:
前段学习之**三角制作**_第3张图片

3.若把四个三角形的其中三个设置为透明色,则得到一个三角形

top



    
"box1">

则如下图所示:
前段学习之**三角制作**_第4张图片

right



    
"box1">

则如下图所示:
前段学习之**三角制作**_第5张图片

bottom



    
"box1">

则如下图所示:
前段学习之**三角制作**_第6张图片

left



    
"box1">

则如下图所示:
前段学习之**三角制作**_第7张图片

若想放大缩小三角,则调节边框大小即可:

eg:

border: 10px solid transparent;
border: 50px solid transparent;
border: 100px solid transparent;

二、三角制作之直角三角形

eg:京东三角制作案例
直角三角形制作

原理
前段学习之**三角制作**_第8张图片
前段学习之**三角制作**_第9张图片
如上述 2所示
若把下边框长度设为0:

<style>
    .box1 {
     
        width: 0;
        height: 0;
        border-top: 10px solid pink;
        border-right: 10px solid red;
        border-bottom: 10px solid blue;
        border-left: 10px solid green;
     }
</style>
<body>
    <div class="box1"></div>
</body>

则如下图所示:(为等腰三角形)

在这里插入图片描述
若想得到直角三角形,则把top边框值设大:

<style>
    .box1 {
     
        width: 0;
        height: 0;
        border-top: 100px solid pink;
        border-right: 10px solid red;
        border-bottom: 0px solid blue;
        border-left: 10px solid green;
     }
</style>
<body>
    <div class="box1"></div>
</body>

则如下图所示:(为直角三角形)

前段学习之**三角制作**_第10张图片
把左边框设为0(上边框不能为0):

<style>
    .box1 {
     
        width: 0;
        height: 0;
        border-top: 100px solid pink;
        border-right: 10px solid red;
        border-bottom: 0px solid blue;
        border-left: 0px solid green;
     }
</style>
<body>
    <div class="box1"></div>
</body>

则如下图所示:

在这里插入图片描述

做直角三角形:

  1. 左边和下边的边框宽度设置为0;
  2. 把上边框宽度调大
  3. 把上边框颜色设为透明色
<style>
    .box1 {
     
        width: 0;
        height: 0;
        border-top: 100px solid transparent;
        border-right: 50px solid red;
        border-bottom: 0px solid blue;
        border-left: 0px solid green;
     }
</style>
<body>
    <div class="box1"></div>
</body>

简写代码:

 width: 0;
 height: 0;
 border-color:transparent red transparent transparent;
 border-style:solid;
 border-width: 100px 50px 0 0;

如图所得为直角三角形:
直角三角形

(此为借鉴pink老师前段入门视频所做的笔记,仅供参考。)

你可能感兴趣的:(Web前段开发,html,css,html5,css3,javascript)