<div style='background:redheight:20pxwidth:30pxdisplay: inline-block'></div>
<div style='top:5pxheight: 0pxborder: 15px red solidwidth: 20pxborder-top-color: transparentborder-right-color: transparentborder-bottom-color: transparentdisplay: inline-blockposition: relativeleft: -4px'></div>
使用
当然,其他任意方向也是可以的,只需要控制旋转角度rotate即可。原理是构造了一个正方形,隐藏了其中的两条边left和bottom,然后进行旋转。
通过使用正方形左下两条边,并向下向右平移,再旋转,得到一个向下并居中的箭头
并非是CSS制作的,而是HTML的表单当中的下拉菜单标签
比如
<select><option>HTML5学堂</option>
<option>原创技术文章分享</option>
</select>
如果你不希望使用系统自定义的下拉菜单,那么,你需要使用各种元素(比如div),进行定位等处理,实现想要的样式,再之后,需要使用JS进行控制