/* 定义一个父元素 *//* 设置父元素的高度和宽度 */ .hourglass { width: 100px; height: 160px; position: relative; } /* 定义上三角形 */ .hourglass:before { content: ""; position: absolute; top: 0; left: 0; right: 0; margin: auto; width: 0; height: 0; border-style: solid; border-width: 80px 50px 0 50px; border-color: red transparent transparent transparent; transform: rotate(180deg); } /* 定义下三角形 */ .hourglass:after { content: ""; position: absolute; bottom: 0; left: 0; right: 0; margin: auto; width: 0; height: 0; border-style: solid; border-width: 0 50px 80px 50px; border-color: transparent transparent red transparent; } /* 调整上下三角形的位置 */ .hourglass:before, .hourglass:after { z-index: -1; } /* 设置父元素的背景颜色和边框 */ .hourglass { background-color: yellow; border: 1px solid black; }
上述代码中,大家利用:before和:after伪类来分别定义上下两个三角形。利用border属性以及transform中的rotate属性来设置三角形的形状和方向。同时,利用position和z-index属性来控制两个三角形的位置。
最终,大家得到一个具有沙漏形状的div元素,可以通过调整父元素的高度和宽度以及三角形的大小和角度来实现不同大小和形状的沙漏效果。