css制作三角形,下拉框三角形_html/css_WEB-ITnose
程序员文章站
2022-03-16 19:09:03
...
网站制作中常常需要下拉框,而如果下拉框如果只是单纯的矩形则会显得太过单调,所以这次教大家利用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 { 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;}
这个具体数值大家可以看情况在进行调节!
下一篇: PHP实现批量生成各种尺寸Logo的方法
推荐阅读
-
css模拟实现selec下拉框_html/css_WEB-ITnose
-
学习使用 CSS3 制作网站面包屑导航效果_html/css_WEB-ITnose
-
页面制作之开发调试工具(1)_html/css_WEB-ITnose
-
如何制作响应式网站?12个优秀案例参考_html/css_WEB-ITnose
-
HTML表格制作问题_html/css_WEB-ITnose
-
基于CSS3制作的鼠标悬停动画菜单_html/css_WEB-ITnose
-
Hexo 主题制作指南_html/css_WEB-ITnose
-
使用CSS制作Heart动画_html/css_WEB-ITnose
-
CSS3 动画制作学习(一)_html/css_WEB-ITnose
-
前端小tips,纯css3各方向小三角的制作原理_html/css_WEB-ITnose