之前一直用css写三角形,反正网上搜一个案例出来,能用就行。今天花了功夫弄懂了原理和使用方法,记录下来,希望能对跟我基础一样弱的人有所帮助。
首先css写三角形是通过border实现的,大多数人用border就是定义边框的。所以要用border来写三角形就会掉到边框的思维模式里面去出不来...
先来一个定义,元素的border其实是三角形组合成的,神不神奇?意不意外?
我们来一段代码证实下这个问题:
.box{ width:50px; height:50px; border-width:50px; border-style: solid; border-color:orange blue red green; }
然后你会发现页面显示是这个样子滴:
弄懂了这个概念那么三角形就好写了,例如我们要角向下的三角形,就把上边框颜色保留,其他三个颜色全部设置成透明“transparent”就行。
所以我们只需要来把上面的代码改成“border-color:orange transparent transparent transparent;”就行,验证下:
果然成功了,弄懂了原理和用法就可以弄出各种三角形了。还可以用多个div盒子拼凑弄出来其他各种各样的图形呢。
相关推荐
取消回复欢迎 你 发表评论:
- 最新文章
- 热文排行
- 最多评论
- 1天兴工作室2021年春节放假通知02-08
- 2zblogphp1.7版本正式上线,附zblogphp1.7升级指南和注意事项02-08
- 3主题的暗黑模式是什么?怎么设置和使用暗黑模式?01-19
- 4zblog判断插件是否安装或者启用的代码介绍01-16
- 5translate3d和z-index冲突导致z-inde值无效的解决办法01-10
- 6zblogphp提示“ Call to undefined function openssl_pkey_get_public()”的原因和解决办法12-25
- 7zblogphp1.6版本报错“非法访问”的原因和解决办法12-23
- 8wordpress导航栏自定义添加class和rel="nofollow"的步骤12-13
- 9swiper做导航栏时自动跳转至对应分类的代码12-07
- 标签聚合
- ×1充100送20×3套餐×1wpimport×1蓝色cms×1上网流量包×2通话王×1楚天双享号×1验证码×1合家欢包年×1送电动车×5唐世军×2php7×3心悦卡×1完美家庭×4飞Young×1充值包×1套餐减半×1神州行套餐×3zblog最新版×1root
最新评论
-
访客
来个限时优惠 -
天兴工作室
不还价的 -
小马过河
能不能便宜点啊 -
中加达移民
个人买过这个网站的主题,可以付责任的说,主题很好好用。另外我不是托! -
吸料机
已经解决