<style>
/* 1. 边框是由四个梯形组成的
2. 当元素的宽高为0时, 则为4个三角形 */
div {
width: 0px;
height: 0px;
/* 四条边都是透明色 */
border: 20px solid transparent;
/* 只保留顶边的颜色 */
border-top: 20px solid #000;
/* 去除底边, 只有一个顶边的高度 */
border-bottom: none;
}
/* 鼠标悬浮时 由于顶边和底边的高度一致, 所以可以在同一位置做标志的切换 */
div:hover {
/* 去除顶边 */
border-top: none;
/* 只保留底边的高度, 和底边的颜色 */
border-bottom: 20px solid pink;
}
</style>
<body>
<div></div>
</body>
CSS边框实现三角形
最新推荐文章于 2024-05-24 21:26:42 发布