HTML+CSS写三角形原理

HTML+CSS写三角形原理

html:

<div class="triangle">
    这是三角形
div>

css:

.triangle{
        border-top: 20px solid green;
        border-left: 20px solid red;
        border-bottom: 20px solid yellow;
        border-right: 20px solid blue;
        }

加上4边边框之后的效果:
这里写图片描述

在这基础上把中间内容区域的宽高设置为0:

.triangle{
        width: 0;
        height: 0;
        border-top: 20px solid green;
        border-left: 20px solid red;
        border-bottom: 20px solid yellow;
        border-right: 20px solid blue;
        }

去掉宽高效果:
这里写图片描述

去掉文字:

<div class="triangle">
    
div>

去掉文字效果:
这里写图片描述

总结:现在就剩下4个小的三角形,想要哪一边的三角形就把其他三边的颜色设置为透明

全部代码:


<html>
    <head>
        <meta charset="UTF-8">
        <title>title>
        <style type="text/css">
            .triangle{
                width: 0;
                height: 0;
                border-top: 20px solid transparent; /*transparent指全透明颜色*/
                border-left: 20px solid transparent;
                border-bottom: 20px solid yellow;
                border-right: 20px solid transparent;
            }
        style>
    head>
    <body>
        <div class="triangle">
            
        div>
    body>
html>

效果:
这里写图片描述


It’s over

你可能感兴趣的:(html/css,css三角形原理)