CSS-边距2-实现一个三角形

2017-08-12 本文已影响0人 Java小工匠

1、利用CSS实现一个三角形

1.1实现思路

（1）将元素的宽度和高度设置为0，同时设置4个边的颜色和宽度，出现4个三角形。
（2）将其中3个边设置为透明。

1.2源代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS实现三角形</title>
    <style type="text/css">
        .div1{
            width: 0px;
            height: 0px;
            border-top: 100px solid red;
            border-bottom:100px solid  yellow;
            border-left:100px solid  blue;
            border-right: 100px solid gray;
        }
         .div-top{
            width: 0px;
            height: 0px;
            border-top: 100px solid transparent;
            border-bottom:100px solid  yellow;
            border-left:100px solid  transparent;
            border-right: 100px solid transparent;
            float: left;
        }
         .div-bottom{
            width: 0px;
            height: 0px;
            border-top: 100px solid red;
            border-bottom:100px solid  transparent;
            border-left:100px solid  transparent;
            border-right: 100px solid transparent;
             float: left;
        }
        .div-left{
             float: left;
            width: 0px;
            height: 0px;
            border-top: 100px solid transparent;
            border-bottom:100px solid  transparent;
            border-left:100px solid  transparent;
            border-right: 100px solid gray;
        }
        .div-right{
            float: left;
            width: 0px;
            height: 0px;
            border-top: 100px solid transparent;
            border-bottom:100px solid  transparent;
            border-left:100px solid  blue;
            border-right: 100px solid transparent;
        }
    </style>
</head>
<body>
    <h3>1、将元素的宽度和高度设置为0 ，设置4个边的颜色和宽度。出现4个三角形。</h3>
    <div class="div1"></div>
    <h3>2、设置3个变透明</h3>
    <div class="div-top"></div>
    <div class="div-right"></div>
    <div class="div-bottom"></div>
    <div class="div-left"></div>
</body>
</html>

1.3运行效果

CSS三角形

2、CSS 导航下边三角形

2.1实现效果

效果

2.2实现思路

（1）使用一个div中，放置3个div内容、红色三角形、蓝色三角形。
（2）设置div的布局为相对定位，设置红色和蓝色三角形的盒子为绝对定位。
（3）设置红色三角形盒子top:50%，y轴偏移到中间，但是盒子并不是在中间，通过margin-top:-20px. 向上偏移三角形的一半，这样红色三角形正好到中间。
（4）设置蓝色三角形盒子left:50%，x轴偏移到中间，但是盒子并不是在中间，通过margin-left:-20px. 向走偏移三角形的一半，这样蓝色三角形正好到中间。

2.3源代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS实现三角形</title>
    <style type="text/css">
    body{
        margin: 0px;
    }
    .div{
        width: 200px;
        height: 200px;
        margin-left: 100px;
        margin-top: 100px;
        position: relative;
    }
    .div .content{
        width: 200px;
        height: 200px;
        border: 1px solid red;
    }
    .div .right{
        position: absolute;
        left: 200px;
        top: 50%;
        width: 0px;
        height: 0px;
        border-left:  20px solid red;
        border-right: 20px solid transparent;
        border-top:  20px solid transparent;
        border-bottom: 20px solid transparent;
        margin-top: -20px;
    }
    .div .bottom{
        position: absolute;
        left: 50%;
        top : 200px;
        width: 0px;
        height: 0px;
        border-left:  20px solid transparent;
        border-right: 20px solid transparent;
        border-top:  20px solid blue;
        border-bottom: 20px solid transparent;
        margin-left: -20px;
    }
    </style>
</head>
<body>
    <div class="div">
         <div class="content"></div>
         <div class="right"></div>
         <div class="bottom"></div>
    </div>
</body>
</html>