数码控科技猎奇Iphone动漫星座游戏电竞lolcosplay王者荣耀攻略allcnewsBLOGNEWSBLOGASKBLOGBLOGZSK全部技术问答问答技术问答it问答代码软件新闻开发博客电脑/网络手机/数码笔记本电脑互联网操作系统软件硬件编程开发360产品资源分享电脑知识文档中心IT全部全部分类全部分类技术牛文全部分类教程最新网页制作cms教程平面设计媒体动画操作系统网站运营网络安全服务器教程数据库工具网络安全软件教学vbscript正则表达式javascript批处理更多»编程更新教程更新游戏更新allitnewsJava新闻网络医疗信息化安全创业站长电商科技访谈域名会议专栏创业动态融资创投创业学院 / 产品经理创业公司人物访谈营销开发数据库服务器系统虚拟化云计算嵌入式移动开发作业作业1常见软件all电脑网络手机数码生活游戏体育运动明星影音休闲爱好文化艺术社会民生教育科学医疗健康金融管理情感社交地区其他电脑互联网软件硬件编程开发360相关产品手机平板其他电子产品摄影器材360硬件通讯智能设备购物时尚生活常识美容塑身服装服饰出行旅游交通汽车购房置业家居装修美食烹饪单机电脑游戏网页游戏电视游戏桌游棋牌游戏手机游戏小游戏掌机游戏客户端游戏集体游戏其他游戏体育赛事篮球足球其他运动球类运动赛车健身运动运动用品影视娱乐人物音乐动漫摄影摄像收藏宠物幽默搞笑起名花鸟鱼虫茶艺彩票星座占卜书画美术舞蹈小说图书器乐声乐小品相声戏剧戏曲手工艺品历史话题时事政治就业职场军事国防节日风俗法律法规宗教礼仪礼节自然灾害360维权社会人物升学入学人文社科外语资格考试公务员留学出国家庭教育学习方法语文物理生物工程学农业数学化学健康知识心理健康孕育早教内科外科妇产科儿科皮肤科五官科男科整形中医药品传染科其他疾病医院两性肿瘤科创业投资企业管理财务税务银行股票金融理财基金债券保险贸易商务文书国民经济爱情婚姻家庭烦恼北京上海重庆天津黑龙江吉林辽宁河北内蒙古山西陕西宁夏甘肃青海新疆西藏四川贵州云南河南湖北湖南山东江苏浙江安徽江西福建广东广西海南香港澳门台湾海外地区

排列五开奖号:使用CSS的border属性绘制各种几何形状的方法

来源:脚本之家  责任编辑:小易  

河北20选五开奖结果 www.vhmyd.cn 前言

border 边框属性可以说是我们在网页布局中最常用不过的一个属性之一。 border 它不只是边框,它还有很多非常有用的“黑魔法”哈,让我们一起来学习一下。

border绘制几何形状的原理

我们先来看一个简单的小例子:

在页面上写一个 div

<div class="border-test"><div>

给这个 div 加上以下样式

.border-test {
  width: 200px;
  height: 200px;
  background-color: #000;
  border-top: 50px solid red;
  border-right: 50px solid yellow;
  border-bottom: 50px solid blue;
  border-left: 50px solid green;
}

在浏览器预览可以看到下面的效果

接下来,我们把这个 div 的宽度跟高度都设为 0 ,看看是什么效果

是不是剩下4个不同颜色不同方向的三角形了,继续往下看,一起来见证下 border 的黑魔法。

border能绘制什么几何形状?

  • 三角形
  • 梯形
  • 平行四边形
  • 五边形
  • 六边形
  • 八边形
  • 五角星
  • 六角星
  • ...

三角形
 

向上的三角形

要得到向上的三角形,是不是只要设置 上边框 的宽度为 0 ,设置 上边框 、 左边框 、 右边框 的边框颜色设为 transparent 透明,保留 下边框 的边框颜色就可以了,看代码:

<div class="triangle triangle-up"></div>
// 公共
.triangle {
    width: 0;
    height: 0;
}

// 向上的三角形
.triangle-up {
    border-top: 0 solid transparent; // 这句这可以省略
    border-right: 50px solid transparent;
    border-bottom: 50px solid blue;
    border-left: 50px solid transparent;
}

还可以简写成,遵循 上右下左 顺序来设置

.triangle-up {
    border-width: 0 50px 50px;  // 边框大小
    border-style: solid;  // 边框样式
    border-color: transparent transparent blue;  // 边框颜色
}

下面代码都会用简写的形式。

向右的三角形

同理,设置 右边框 的宽度为 0 ,设置 上边框 、 右边框 、 下边框 的边框颜色为透明,保留 左边框 的边框颜色就可以了

<div class="triangle triangle-right"></div>
.triangle-right {
    border-width: 50px 0 50px 50px;
    border-style: solid;
    border-color: transparent transparent transparent green;
}

向下的三角形

同理,设置 下边框 的宽度为 0 ,设置 左边框 、 右边框 、 下边框 的边框颜色为透明,保留 上边框 的边框颜色就可以了

<div class="triangle triangle-bottom"></div>
.triangle-bottom {
    border-width: 50px 50px 0;
    border-style: solid;
    border-color: red transparent transparent;
}

向左的三角形

同理,设置 左边框 的宽度为 0 ,设置 上边框 、 下边框 、 左边框 的边框颜色为透明,保留 右边框 的边框颜色就可以了

<div class="triangle triangle-left"></div>
.triangle-left {
    border-width: 50px 50px 50px 0;
    border-style: solid;
    border-color: transparent yellow transparent transparent;
}

接下来再来看下如何实现下面的三角形呢?

其实不难发现,向左上的三角形刚好是向下的三角形的右半部分,所以要得到这个图形,是不是只要把向下的三角形左半部分的边框设为0就可以了,看代码:

<div class="triangle triangle-top-left"></div>
.triangle-top-left {
    border-width: 50px 50px 0 0;
    border-style: solid;
    border-color: red transparent transparent;
}

同理,可得到其他三个不同方向三角形,代码如下:

.triangle-top-right {
    border-width: 50px 0 0 50px;
    border-style: solid;
    border-color: red transparent transparent;
}

.triangle-bottom-left {
    border-width: 0 50px 50px 0;
    border-style: solid;
    border-color: transparent transparent blue;
}

.triangle-bottom-right {
    border-width: 0 0 50px 50px;
    border-style: solid;
    border-color: transparent transparent blue;
}

梯形

借助上面的实现三角形的方法,我们可以很容易的实现梯形,比如下面这个:

向上的梯形:

其实只要把上面 向上的三角形 的代码加上宽度就能实现了

.trapezoid {
  width: 60px;
  border-bottom: 60px solid red;
  border-left: 60px solid transparent;
  border-right: 60px solid transparent;
}

同理,可以得到 向下的梯形

.trapezoid-bottom {
    width: 50px;
    border-top: 50px solid red;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
}

如果要得到向左和向右的梯形,需要把 width 设为 0 ,然后设置相应的高度值。

.trapezoid-left {
    width: 0;
    height: 50px;
    border-width: 50px 50px 50px 0;
    border-style: solid;
    border-color: transparent red transparent transparent;
}

.trapezoid-right {
    width: 0;
    height: 50px;
    border-width: 50px 0 50px 50px;
    border-style: solid;
    border-color: transparent transparent transparent red;
}

平行四边形

只要一个 向上的三角形向下的三角形 结合起来就能实现,需要配合一个伪元素。

.parallelogram {
    position: relative;
    width: 0;
    height: 0;
    border-width: 0 50px 50px;
    border-style: solid;
    border-color: transparent transparent red;
}

.parallelogram:after {
    position: absolute;
    top: 0;
    left: 0;
    border-width: 50px 50px 0;
    border-style: solid;
    border-color: red transparent transparent;
    content: "";
}

五边形

梯形加上一个三角形,很容易就能组合成一个五边形,也需要配合一个伪元素来实现。

.pentagon {
    position: relative;
    width: 50px;
    border-bottom: 50px solid red;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
}

.pentagon:after {
    position: absolute;
    top: 50px;
    left: -50px;
    width: 0;
    height: 0;
    border-width: 75px 75px 0;
    border-style: solid;
    border-color: red transparent transparent;
    content: "";
}

六边形

如果两个相反方向且底边同样大小的梯形,叠加在一起,是不是就能得到一个六边形呢?同样需要配合一个伪元素来实现。

.hexagon {
    position: relative;
    width: 50px;
    border-bottom: 50px solid red;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
}

.hexagon:after {
    position: absolute;
    top: 50px;
    left: -50px;
    width: 50px;
    border-top: 50px solid red;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    content: "";
}

实战应用

聊天气泡

是不是用到了 向下的三角形 结合一个圆角矩形来实现。

下拉菜单

我们打开淘宝天猫,来看下它顶部的下拉菜单,是不是也用到 向上的三角形向下的三角 形。

我们来看下它的实现代码:

再来看一个,我们打开京东秒杀

是不是就用到了我们上面分析的 平行四边形 来实现的,我们同样来看下它的实现代码:

就是通过一个矩形,然后配合两个伪元素的三角形结合起来实现的。

具体使用场景还有很多,大家可以根据自己平时项目开发中的实际需求来发挥想象。

能用CSS样式搞定的效果就不要使用图片哈,不仅有利于后期的维护,也能减少网页的请求,提高页面的加载速度。

总结

其实通过各种组合,还可以实现很多不同的形状,这里就不一一列举了。比如还可以实现 八边形 、 五角星 、 六角星 、 八角星 、 十二角星 等等, border 就是这么强大。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。


  • 本文相关:
  • 使用css3绘制出各种几何图形
  • 纯css打造兼容各种浏览器的几何图形打包
  • 免责声明 - 关于我们 - 联系我们 - 广告联系 - 友情链接 - 河北20选五开奖结果 - 频道导航
    Copyright © 2017 河北20选五开奖结果 www.vhmyd.cn All Rights Reserved
  • 在深入推动长江经济带发展座谈会上的讲话 2019-03-23
  • 把环保责任镶嵌到组织管理架构中去 2019-03-22
  • 今年江西千万元公益金买服务 受益者将更广泛 2019-03-22
  • 您访问的页面找不回来了 2019-03-22
  • 特金明日将通电话 提醒谁莫忘感恩? (原创首发) 2019-03-21
  • 法制日报:别让世界杯激情冲淡守法意识 2019-03-21
  • [大笑]小撸的眼睛在滴血…… 2019-03-21
  • 浙江大学科研团队潜心十五载 飞机装配有了国产自动化设备 2019-03-21
  • 不断开辟21世纪马克思主义新境界 —— 学习习近平总书记在纪念马克思诞辰200周年大会上的讲话 2019-03-20
  • 王一彪:为新时代“双一流”建设提供舆论支持 2019-03-20
  • 傅抱石《琵琶行诗意》1.035亿元成交 2019-03-19
  • 国地税怎么又合并了呢 一般来看 这是种集中资源的举动 2019-03-19
  • 中考期间 太原27个公共自行车服务点有人值守 2019-03-18
  • 美媒:美国“伪专家”太多,妨碍美对华关系 2019-03-18
  • “公路挤成步行街”端午假期超944万人次打卡“网红”重庆 2019-03-18
  • 781| 459| 158| 198| 265| 391| 613| 758| 249| 158|