网站制作中常常需要下拉框，而如果下拉框如果只是单纯的矩形则会显得太过单调，所以这次教大家利用css制作三角形放在矩形上面
立即学习“前端免费学习笔记（深入）”；
首先利用css制作三角形
div { width:0px; height:0px; border-top:20px solid transparent; border-left:20px solid transparent; border-right:20px solid transparent; border-bottom:20px solid green; }
<div></div>
然后就是将这个三角形放到矩形上面注意这里如果想要箭头朝向哪边就将哪边的颜色显示，其余用透明就行
立即学习“前端免费学习笔记（深入）”；
div { width:150px; height:150px; position:relative; margin:50px auto;}div p { border:1px solid #000; width:100px; height:100px;}div span { display:block; width:0px; height:0px; border-top:20px solid transparent; border-left:20px solid transparent; border-right:20px solid transparent; border-bottom:20px solid black; position:absolute; top:-40px; left:0;}div span.blank { border-top:19px solid transparent; border-left:19px solid transparent; border-right:19px solid transparent; border-bottom:19px solid white; top:-37px; left:1px;}
立即学习“前端免费学习笔记（深入）”；
立即学习“前端免费学习笔记（深入）”；
这个具体数值大家可以看情况在进行调节！
HTML怎么学习？HTML怎么入门？HTML在哪学？HTML怎么学才快？不用担心，这里为大家提供了HTML速学教程(入门课程)，有需要的小伙伴保存下载就能学习啦！
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
472
收藏
