欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

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

程序员文章站 2022-07-04 09:06:23
...

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>