纯css玩转三角形_html/css_WEB-ITnose
程序员文章站
2024-04-03 13:11:46
...
如今css3盛行的时代,用canvas,svg以及linear-gradient,radio-gradient都能画出各种各样的图形。
但是早在css2时代,画三角形就不是什么新鲜事。这里简单总结一下,也方便自己查阅。
写出通用结构,
.triangle-up { width: 0; height: 0; border-top: 50px solid transparent; border-left: 100px solid red; border-bottom: 50px solid transparent; }
如果这样写样式的话,由于没有设置border-right 会导致三角形的尖角指向右方。这个发挥一下空间想象力,纸上画一下就知道了。
如果要三角尖朝上只需不设置border-top即可。
#triangle-up { width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 100px solid red; }
同理:
三角减朝左:
#triangle-left { width: 0; height: 0; border-top: 50px solid transparent; border-right: 100px solid red; border-bottom: 50px solid transparent; }
三角减朝下:
#triangle-down { width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-top: 100px solid red; }
当然如果我把border-top设置100px 红色 ,border-left设置为100px 透明的话 会得到一个折角的效果:
#triangle-topright { width: 0; height: 0; border-top: 100px solid red; border-left: 100px solid transparent; }
这样又是可以设置四个方向的。原理都一样。
http://codepen.io/tianzi77/pen/WQeGmx
版权声明:本文为博主原创文章,未经博主允许不得转载。
推荐阅读
-
纯css玩转三角形_html/css_WEB-ITnose
-
了解HTML CSS选择器操作和特性_html/css_WEB-ITnose
-
JavaScript学习笔记:数组(八)_html/css_WEB-ITnose
-
HTML+CSS学习笔记(7)- CSS样式基本知识_html/css_WEB-ITnose
-
对于浮动的一些理解_html/css_WEB-ITnose
-
html学习(二)_html/css_WEB-ITnose
-
鼠标右键新窗口打开问题_html/css_WEB-ITnose
-
奇舞周刊第143期(2016-01-15)_html/css_WEB-ITnose
-
CSS第一次加载失效的问题_html/css_WEB-ITnose
-
让360浏览器使用特定的模式打开网页(HTML)_html/css_WEB-ITnose