各種demo：css實現三角形，css大小梯形，svg使用

最後更新：2017-07-27 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

標籤：svg charset radius 大小屬性 box overflow order fda

各種demo：

1、css實現正方形

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

<!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>

圖形

2、css實現三角形

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

代碼：

<!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>

圖形

代碼：

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

圖形

代碼：

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

圖形

3、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;            }

圖形：

4、css實現這個圖形

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

代碼：

<!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>

5、css實現

各種demo：css實現三角形，css大小梯形，svg使用

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More