溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點(diǎn)擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

如何使用css實(shí)現(xiàn)扇形菜單

發(fā)布時(shí)間：2022-03-01 09:22:45 來源：億速云 閱讀：182 作者：小新 欄目：web開發(fā)

這篇文章主要介紹如何使用css實(shí)現(xiàn)扇形菜單，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！

<!DOCTYPE html>

<html>

<head>

<title></title>

<meta charset="UTF-8">

<style>

#sector {

position: relative;

overflow: hidden;

width: 200px;

height: 100px;

margin: 150px auto;

background-color: #ddd;

border-top-left-radius: 100px;

border-top-right-radius: 100px;

}

#sector ul li {

list-style: none;

position: absolute;

width: 200px;

height: 100px;

right: 50%;

top: 0;

-webkit-transform-origin: 100% 100%;

-moz-transform-origin: 100% 100%;

-ms-transform-origin: 100% 100%;

transform-origin: 100% 100%;

}

#sector .sector1 {

background-color: #fef4ac;

-webkit-transform: skew(54deg);

-moz-transform: skew(54deg);

-ms-transform: skew(54deg);

transform: skew(54deg);

}

#sector .sector2 {

background-color: #FCF6E6;

-webkit-transform: rotate(36deg) skew(54deg);

-moz-transform: rotate(36deg) skew(54deg);

-ms-transform: rotate(36deg) skew(54deg);

transform: rotate(36deg) skew(54deg);

}

#sector .sector3 {

background-color: #faf2cc;

-webkit-transform: rotate(72deg) skew(54deg);

-moz-transform: rotate(72deg) skew(54deg);

-ms-transform: rotate(72deg) skew(54deg);

transform: rotate(72deg) skew(54deg);

}

#sector .sector4 {

background-color: #f9f1e9;

-webkit-transform: rotate(108deg) skew(54deg);

-moz-transform: rotate(108deg) skew(54deg);

-ms-transform: rotate(108deg) skew(54deg);

transform: rotate(108deg) skew(54deg);

}

#sector .sector5 {

background-color: #f5e79e;

-webkit-transform: rotate(144deg) skew(54deg);

-moz-transform: rotate(144deg) skew(54deg);

-ms-transform: rotate(144deg) skew(54deg);

transform: rotate(144deg) skew(54deg);

}

#sector ul li p {

position: absolute;

top: 50px;

left: 150px;

-webkit-transform: skew(-54deg) rotate(-70deg);

-moz-transform: skew(-54deg) rotate(-70deg);

-ms-transform: skew(-54deg) rotate(-70deg);

transform: skew(-54deg) rotate(-70deg);

}

</style>

</head>

<body>

<div id="sector">

<ul>

<li class="sector1"><p>A</p></li>

<li class="sector2"><p>B</p></li>

<li class="sector3"><p>C</p></li>

<li class="sector4"><p>D</p></li>

<li class="sector5"><p>E</p></li>

</ul>

<a></a>

</div>

</body>

</html>

以上是“如何使用css實(shí)現(xiàn)扇形菜單”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對大家有幫助，更多相關(guān)知識，歡迎關(guān)注億速云行業(yè)資訊頻道！

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

css
AI
助
手