css3怎麼寫出不規則五邊形
- WBOY原創
- 2021-12-16 18:19:383162瀏覽
寫法：1、用「border:長度solid transparent;border-right:高度solid 顏色」語句設定元素為三角形樣式；2、用「margin:value」語句設定三角形元素和一個與三角形同寬的矩形元素間距為0即可。
本教學操作環境：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='left'></div>
</body>
</html>輸出結果：
#（學習影片分享：css影片教學）
以上是css3怎麼寫出不規則五邊形的詳細內容。更多資訊請關注PHP中文網其他相關文章！
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
上一篇：css3怎麼旋轉放大縮小下一篇：css3怎麼旋轉放大縮小