CSS下拉倒三角是一個常用的UI設計元素,可以用來設計下拉菜單、選項框等。下面介紹一種簡單的實現方法。
.dropdown { position: relative; /*相對定位*/ display: inline-block; /*行內塊元素*/ } .dropdown-content { z-index: 1; /*使下拉菜單位于其他元素之上*/ position: absolute; /*絕對定位*/ top: 100%; /*頂端對齊*/ left: 0; right: 0; background-color: #fff; /*背景顏色*/ box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); /*陰影*/ } .dropdown:hover .dropdown-content { display: block; /*鼠標懸停顯示下拉菜單*/ } .dropdown:after { content: ""; /*偽元素*/ position: absolute; top: 50%; /*垂直居中*/ right: 10px; transform: translateY(-50%) rotate(45deg); /*使偽元素成為倒三角形*/ border: solid black; border-width: 0 3px 3px 0; /*傾斜角度為45度*/ display: inline-block; padding: 3px; }
通過設置父元素為相對定位,子元素為絕對定位來實現下拉菜單的位置。偽元素的使用可以很方便地實現倒三角形的效果,其中傾斜角度可以根據需要進行調整。
下一篇css下拉三角怎么設置