CSS-邊距2-實現一個三角形

java小工匠發表於2017-08-12
CSS

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>


相關文章