前端（各類demo）一：css實現三角形，css實現梯形，pop彈層，css僞類before，after使用，svg使用（持續更新中）

時間 2019-11-12

標籤前端各類 demo css 實現三角形梯形 pop 使用 svg 持續更新欄目 CSS 简体版

原文原文鏈接

各類demo：css

一、css實現正方形html

思路：width爲0；height爲0；使用boder-width爲正方形的邊長的一半，不佔任何字節；border-style爲固體；border-color爲正方形的填充色。web

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            .triangle{
                width: 0;
                height: 0;
                border-width: 30px;
                border-style: solid;
                border-color:#e66161; 
            }
        </style>
    </head>
    <body>
        <div class="triangle"></div>
    </body>
</html>

圖形瀏覽器

二、css實現三角形svg

思路：寬度width爲0；height爲0；border-width爲直角三角形斜邊的一半；border-color裏有四個顏色屬性，第一個爲上--直角三角形內充填充色，第二個爲右--直角三角形內填充色，第三個爲下--直角三角形內填充色，第四個爲左--直角三角形內填充色。字體

代碼：url

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            .triangle{
                width: 0;
                height: 0;
                border-width: 30px;
                border-style: solid;
                border-color: #000000 transparent transparent transparent;
            }
        </style>
    </head>
    <body>
        <div class="triangle"></div>
    </body>
</html>

圖形spa

代碼：3d

.triangle{
                width: 0;
                height: 0;
                border-width: 30px;
                border-style: solid;
                border-color: #000000 #000000 transparent transparent;
            }

圖形code

代碼：

.triangle{
                width: 0;
                height: 0;
                border-width: 30px;
                border-style: solid;
                border-color: #000000 #f50303 transparent transparent;
            }

圖形

三、css實現正方形外梯形

思路：仍是以前的思路，width爲20；高度爲20；梯形的短底邊爲div的width；梯形的長邊=width+border-width*2；

代碼：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            .triangle{
                width: 20px;
                height: 20px;
                border-width:30px;
                border-style: solid;
                border-color: #000000 transparent transparent transparent;
            }
        </style>
    </head>
    <body>
        <div class="triangle"></div>
    </body>
</html>

圖形：

代碼：

.triangle{
                width: 0;
                height: 0;
                border-width: 30px;
                border-style: solid;
                border-color:#e66161 #f3bb5b #94e24f #85bfda;
            }

圖形：

四、css實現pop彈層

思路：利用兩個三角形進行拼接，一個是背景色，一個是邊框色，而後利用定位重疊在一塊兒，定位要相差一個像素。

代碼：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            .box{
                position: relative;
                width: 240px;
                height: 60px;
                line-height: 60px;
                background: #e9fbe4;
                box-shadow: 1px 2px 3px #e9fbe4;
                border: 1px solid #c9e9c0;
                border-radius: 4px;
                text-align: center;
                color: #0c7823;
            }
            .triangle-border{
                width: 0;
                height: 0;
                border-width: 10px;
                border-style: solid;
                position: absolute;
                left: 30px;
                overflow: hidden;
                
            }
            .border{
                bottom:-20px;
                border-color: #C9E9C0 transparent transparent transparent;
            }
            .background{
                bottom: -19px;
                border-color: #E9FBE4 transparent transparent transparent;
            }
        </style>
    </head>
    <body>
        <div class="box">
            <span>我是利用border屬性實現</span>
            <div class="triangle-border border"></div>
            <div class="triangle-border background"></div>
        </div>
    </body>
</html>

五、css實現字體漸變色

5.1使用gradient屬性

存在的不足：IE瀏覽器都不支持。

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8" />
        <title></title>
        <style type="text/css">
            .promotion-floor-title {
                text-align: center;
                margin: 60px auto 40px;
            }
            
            .promotion-floor-title .title p {
                display: inline-block;
                text-align: center;
                font-size: 42px;
                background-image: -webkit-gradient(linear, 0 0, 0 bottom, from(#2ED4FB), to(#236BEC));
                -webkit-background-clip: text;
                -webkit-text-fill-color: transparent;
            }
        </style>
    </head>

    <body>
        <div class="promotion-floor-title">
            <div class="title">
                <p>Hello</p>
            </div>
        </div>

    </body>

</html>

5.2使用svg，支持IE9以及以上

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8" />
        <title></title>
        <style type="text/css">
            .promotion-floor-title {
                text-align: center;
                margin: 60px auto 40px;
            }
            
            .promotion-floor-title .title {
                min-width: 590px;
                height: 41px;
                display: inline-block;
                position: relative;
            }
            
            .promotion-floor-title .title svg {
                margin: 0 223px;
                height: 41px;
            }
        </style>
    </head>

    <body>
        <div class="promotion-floor-title">
            <div class="title">
                <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
                    <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
                        <stop offset="0%" style="stop-color:#2ED4FB;stop-opacity:1" />
                        <stop offset="100%" style="stop-color:#236BEC;stop-opacity:1" />
                    </linearGradient>
                    <text text-anchor="middle" x="50%" y="50%" dy=".36em" class="text" font-size="3.6rem" fill="url(#grad1)">Hello</text>
                </svg>
            </div>
        </div>
    </body>

</html>

六、css實現一條線

思路：使用span標籤，不佔文檔流，使用背景色background是線條顏色，定位使用position=absolute也是脫離原先的文檔流，最主要的是設置高度height爲1px，設置使用top來定位，以及寬度來限制線的長度。

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8" />
        <title></title>
        <style type="text/css">
            .promotion-floor-title {
                text-align: center;
                margin: 60px auto 40px;
            }
            
            .promotion-floor-title .title {
                min-width: 590px;
                height: 41px;
                display: inline-block;
                position: relative;
            }
            
            .promotion-floor-title .title svg {
                margin: 0 223px;
                height: 41px;
            }
            
            .promotion-floor-title .title span {
                background: #5672EB;
                position: absolute;
                height: 1px;
                width: 28%;
                top: 50%;
            }
            
            .promotion-floor-title .title .left-line {
                left: 0;
            }
            
            .promotion-floor-title .title .right-line {
                right: 0;
            }
            
        </style>
    </head>

    <body>
        <div class="promotion-floor-title">
            <div class="title">
                <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
                    <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
                        <stop offset="0%" style="stop-color:#2ED4FB;stop-opacity:1" />
                        <stop offset="100%" style="stop-color:#236BEC;stop-opacity:1" />
                    </linearGradient>
                    <text text-anchor="middle" x="50%" y="50%" dy=".36em" class="text" font-size="3.6rem" fill="url(#grad1)">Hello</text>
                </svg>
                <span class="left-line"></span>
                <span class="right-line"></span>
            </div>
        </div>
    </body>

</html>

七、css使用僞類after實現旋轉正方形

思路:在span使用僞類after，第一步設置content爲""；第二步增長一個width和height相同的值；第三步使用border邊框設定正方形顏色；第四步以及旋轉transform等於rotateZ(45deg)，設置兼容到webkit，moz，ms瀏覽器內核；使用position的absolute脫離原先的文檔流；使用top來進行定位。

代碼：

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8" />
        <title></title>
        <style type="text/css">
            .promotion-floor-title {
                text-align: center;
                margin: 60px auto 40px;
            }
            
            .promotion-floor-title .title {
                min-width: 590px;
                height: 41px;
                display: inline-block;
                position: relative;
            }
            
            .promotion-floor-title .title svg {
                margin: 0 223px;
                height: 41px;
            }
            
            .promotion-floor-title .title span {
                background: #5672EB;
                position: absolute;
                height: 1px;
                width: 28%;
                top: 50%;
            }
            
            .promotion-floor-title .title span:after {
                content: "";
                position: absolute;
                top: -5px;
                height: 9px;
                width: 9px;
                border: 1px solid #5672EB;
                border-radius: 1px;
                transform: rotateZ(45deg);
                -webkit-transform: rotateZ(45deg);
                -moz-transform: rotateZ(45deg);
                -ms-transform: rotateZ(45deg);
            }
            
            .promotion-floor-title .title .left-line {
                left: 0;
            }
            
            .promotion-floor-title .title .left-line:after {
                right: -13px;
            }
            
            .promotion-floor-title .title .right-line {
                right: 0;
            }
            
            .promotion-floor-title .title .right-line:after {
                left: -13px;
            }
        </style>
    </head>

    <body>
        <div class="promotion-floor-title">
            <div class="title">
                <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
                    <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
                        <stop offset="0%" style="stop-color:#2ED4FB;stop-opacity:1" />
                        <stop offset="100%" style="stop-color:#236BEC;stop-opacity:1" />
                    </linearGradient>
                    <text text-anchor="middle" x="50%" y="50%" dy=".36em" class="text" font-size="3.6rem" fill="url(#grad1)">Hello</text>
                </svg>
                <span class="left-line"></span>
                <span class="right-line"></span>
            </div>
        </div>
    </body>

</html>