首頁 > web前端 > css教學 > css3怎麼寫出不規則五邊形

css3怎麼寫出不規則五邊形

WBOY
發布: 2021-12-16 18:19:38
原創
3207 人瀏覽過

寫法:1、用「border:長度solid transparent;border-right:高度solid 顏色」語句設定元素為三角形樣式;2、用「margin:value」語句設定三角形元素和一個與三角形同寬的矩形元素間距為0即可。

css3怎麼寫出不規則五邊形

本教學操作環境:windows10系統、CSS3&&HTML5版、Dell G3電腦。

css3怎麼寫出不規則五邊形

#在css中,想要寫出不規則的五邊形,首先我們需要建立一個三角形和一個與三角形同寬的矩形元素,然後消除這兩個元素中的間距,時一個三角形與一個矩形拼接成一個不規則的五邊形即可。

範例如下:

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>五边形</title>
    <style type="text/css">
#triangle-left { 
width: 0; 
height: 0; 
border-top: 50px solid transparent; 
border-right: 50px solid red; 
border-bottom: 50px solid transparent; 
float: left;
} 
#left{
    width: 200px;
    height: 100px;
    background: red;
    margin-left: 50px;
}
    </style>
</head>
<body>
<div id="triangle-left"></div>
<div id=&#39;left&#39;></div>
</body>
</html>
登入後複製

輸出結果:

css3怎麼寫出不規則五邊形

#(學習影片分享:css影片教學

以上是css3怎麼寫出不規則五邊形的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
css
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板