CSS3—三角形

時間 2019-11-09

標籤 css3 css 三角形欄目 CSS 简体版

原文原文鏈接

話很少說看效果：演示效果，runjscss

1.加了寬高和border，邊用不一樣顏色顯示，每條邊都是一個梯形html

2.去掉寬高，每條邊都是三角形css3

3.只顯示其中一條邊就是不一樣的三角形了,是否是很簡單，改變border四條邊寬度試試吧~ui

上述代碼以下：spa

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>css3—三角形</title>
    </head>
    <style>
        .dib{display: inline-block;}
        .triangle0{
            width:40px;
            height:40px;
            border-top:40px solid yellow;
            border-right:40px solid black;
            border-bottom:40px solid pink;
            border-left:40px solid red;
        }
        .triangle1{
            width:0px;
            height:0px;
            border-top:40px solid yellow;
            border-right:40px solid black;
            border-bottom:40px solid pink;
            border-left:40px solid red;
        }
        .trianglet{
            width:0;
            height:0;
            border-top:40px solid yellow;
            border-right:40px solid transparent;
            border-left:40px solid transparent;
            border-bottom:40px solid transparent;
        }
        .triangler{
            width:0;
            height:0;
            border-top:40px solid transparent;
            border-right:40px solid black;
            border-bottom:40px solid transparent;
            border-left:40px solid transparent;
        }
        .triangleb{
            width:0;
            height:0;
            border-top:40px solid transparent;
            border-right:40px solid transparent;
            border-bottom:40px solid pink;
            border-left:40px solid transparent;
        }
        .trianglel{
            width:0;
            height:0;
            border-top:40px solid transparent;
            border-right:40px solid transparent;
            border-bottom:40px solid transparent;
            border-left:40px solid red;
        }
    </style>
    <body>
        <div class="triangle0 dib"></div>
        <div class="triangle1 dib"></div>
        <div class="trianglet dib"></div>
        <div class="triangler dib"></div>
        <div class="triangleb dib"></div>
        <div class="trianglel dib"></div>
    </body>
</html>

博客園：CSS3—三角形code

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。