css样式中 border的应用_css中border的实例用法-程序员宅基地

技术标签: border 三角形  

在以往的工作中,border多数情况下是用来给盒模型加描边。而如今,可以用border制作各种小形状。

1、三角形

html代码:

<div class="box">
	<span class="in-box"></span>
</div>

css代码:

.box{width: 400px; height: 300px; background: #F3961C; position: relative; margin: 50px auto;}
.in-box{position: absolute; left: 10px; top: -20px; width: 0; height: 0; border-width: 10px; border-style: solid; border-color: #fff #fff #F3961C;}


效果:


2、边框的宽度不一样(等腰三角形)

html代码:

<div class="box">
	<span class="in-box"></span>
</div>

css代码:

.box{width: 400px; height: 300px; background: #F3961C; position: relative; margin: 50px auto;}
.in-box{position: absolute; left: 10px; top: -40px; width: 0; height: 0; border-width: 20px 10px; border-style: solid; border-color: #fff #fff #F3961C;}

效果:



3、边框的宽度不一样(直角三角形)

html代码:

<div class="box">
	<span class="in-box"></span>
</div>


css代码:

.box{width: 400px; height: 300px; background: #F3961C; position: relative; margin: 50px auto;}
.in-box{position: absolute; left: 10px; top: -40px; width: 0; height: 0; border-width: 20px 10px; border-style: solid; border-color: #fff #F3961C #F3961C #fff;}

效果:

4、梯形

html代码:

<div class="box">
	<span class="in-box"></span>
</div>

css代码:

.box{width: 400px; height: 300px; background: #F3961C; position: relative; margin: 50px auto;}
.in-box{position: absolute; left: 10px; top: -50px; width: 10px; height: 10px; border-width: 20px 10px; border-style: solid; border-color: #fff #fff #F3961C #fff;}

效果:


注意:.in-box类中的宽度 、高度并不是0了。


5、圆形(工作中经常运用)

html代码:

<div class="box"></div>

css代码:

.box{width: 100px; height: 100px; background: #F3961C; border-radius: 50%; margin: 50px auto;}

效果:


6、制作半圆

html代码:

<div class="half"></div>

css代码:

.half{ width: 100px; height: 50px;border-radius: 50px 50px 0 0;background: red;margin: 10px 0;}

效果:


制作半圆技巧:

a. 制作上半圆和下半圆:元素的宽度值是高度值的2倍,而且圆角半径值为元素的高度值。

b. 制作左半圆和右半圆:元素的高度值是宽度值的2倍,而且圆角半径值为元素的宽度值。


7、哪边的边框未定义,哪边就是矩形。

html代码:

<div class="box"></div>

css代码:

.box{width: 0; height: 0; border-top: 50px solid #0F0; border-right: 50px solid #f00; border-left: 50px solid #09C; margin: 50px auto;}

效果:

注意:没有定义下边框,那么下边框就表现为矩形。


border制作的高级应用

1、高级应用1

html代码:

<div class="box">
    <span class="box-bot"></span>
    <span class="box-top"></span>
</div>


css代码:

.box{width:300px; padding:30px 20px; border:5px solid #F3961C; position:relative;}
.box span{width:0; height:0; font-size:0; overflow:hidden; position:absolute;}
.box span.box-bot{border-width:20px; border-style:solid; border-color:#F3961C transparent transparent; left:80px; bottom:-40px;}
.box span.box-top{border-width:20px; border-style:solid; border-color:#fff transparent transparent; left:80px; bottom:-33px;}


效果:

这个三角形跟上面的不同,需要2个子元素配合完成。


2、高级应用2

html代码:

<div class="box">
    <span class="box-bot"></span>
    <span class="box-top"></span>
</div>

css代码:

.box{width:300px; padding:30px 20px; margin-left:60px; background:#F3961C; position:relative;}
.box span{width:0; height:0; font-size:0; overflow:hidden; position:absolute;}
.box span.box-bot{border-width:20px; border-style:solid; border-color:#fff #F3961C #F3961C #fff; left:-40px; top:20px; }
.box span.box-top{border-width:10px 20px; border-style:solid; border-color:transparent #fff #fff transparent; left:-40px; top:40px;}

效果:



版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/yhbsww0523/article/details/78721430

智能推荐

小记VUE下setTimeOut和setInterval遇到的问题_vue settimeout只执行了一次-程序员宅基地

文章浏览阅读1.2w次,点赞3次,收藏2次。相信大家对着两个函数都陌生,就是一个定时器,setTimeOut只执行一次,而setInterval会重复执行 需要注意的是:在setInterval不用的时候一定要用clearSetInterval关闭定时器。说一下最近开发中遇到的问题,我是用vue开发的,顺便记录这个错误。 我需要轮询接口,所以使用setInterval。// 我是想没2秒执行一次myFunc这个函数。setInterva_vue settimeout只执行了一次

GridLayout 表格布局_gridlayout 布局方向-程序员宅基地

文章浏览阅读2.4k次。使用此种布局方式是以表格的形式进行布局管理的,在使用此布局管理器时必须设置显示的行数和列数;package chap09.sec04;import java.awt.BorderLayout;import java.awt.GridLayout;import javax.swing.JButton;import javax.swing.JFrame;_gridlayout 布局方向

HarmonyOS什么时候上微内核,华为鸿蒙OS什么时候发售_华为鸿蒙harmonyOS上市时间_3DM手游...-程序员宅基地

文章浏览阅读89次。华为鸿蒙OS什么时候发售呢?华为正式发布鸿蒙,今天,华为开发者大会在广东东莞举行。会议期间,华为将发布荣耀智慧屏、升级版麒麟芯片等新产品技术!不知道的小伙伴就一起来看看吧。华为正式发布鸿蒙是怎么回事8月9日,华为消费者业务CEO余承东正式发布自有操作系统鸿蒙OS。余承东介绍称,鸿蒙是全世界第一个面向全场景微内核的分布式OS,但是考虑生态原因,华为优先支持谷歌安卓生态,如果安卓系统无法使用,华为随时..._鸿蒙什么时候微内核

CentOS 7 安装 gcc && gcc-c++_centos 安装gcc-c++-程序员宅基地

文章浏览阅读1.7k次。Centos 7默认安装的gcc版本为4.8,这里安装更高版本(7.3)#1. 安装centos-release-sclsudo yum install -y centos-release-scl#2. 安装devtoolset,sudo yum install -y devtoolset-7 #sudo yum install -y devtoolset-7-gcc*#3. 激活对应的devtoolset#scl enable devtoolset-7 bash #这条激活命令只对本次会_centos 安装gcc-c++

CTF-Web-JS-俄罗斯方块_ctf cube是啥 方块吗题目-程序员宅基地

文章浏览阅读1.8k次。Web-JS-俄罗斯方块标题JS,进去是俄罗斯方块查看源代码,发现js代码。在线优化格式,发现如下关键代码1000000分时,在cookie写入(“urlkey”,“webqwer”[1]+“100.js”,864E5),e100.js是提示文件浏览器加上xxxx/xxxx/xxxx/e.100.jsjsfuck解密即可得Flag..._ctf cube是啥 方块吗题目

struts 下载中文名文件_sturts下载中文文件-程序员宅基地

文章浏览阅读401次。text/plain attachment;fileName="${fileName}" downloadFile 10240 对文件名的处理fileName = new String((URLEncoder.encode(fileName , "UTF-8")).getBytes("UTF-8"), "GBK");有_sturts下载中文文件

随便推点

win8计算机禁止休眠,win8系统设置禁止电脑休眠的教程方法-程序员宅基地

文章浏览阅读1.4k次。win8系统的休眠其实算的上是一种类似手机息屏待机模式吧,你关机的时候是什么样开机的时候就是什么样。完完全全还原最初的模样。但是对于绝大数人而言,休眠是没有毕业奥德,毕竟一般要么一直开着,要么关机。那么我们该如何关闭win8系统的休眠模式呢?这次小编为大家带来win8系统设置禁止电脑休眠的教程方法,希望对你们有所帮助一起来看看吧。禁止电脑休眠的方法:1、进入桌面后,右键点击“开始”按钮打开菜单,或..._禁止电脑睡眠

蓝桥杯第十届真题B组(2019年)-程序员宅基地

文章浏览阅读1.4k次。2019年第十届蓝桥杯大赛软件类省赛C/C++大学B组#试题 A:组队#本题总分:5分【问题描述】作为篮球队教练,你需要从以下名单中选出 1号位至 5号位各一名球员,组成球队的首发阵容。每位球员担任 1号位至 5号位时的评分如下表所示。请你计算首发阵容 1号位至5号位的评分之和最大可能是多少?此题需要注意的是:一个人可能在很多个位分数都是最高的,但..._蓝桥杯第十届b字串数字到lanqlao答案是多少 site:blog.csdn.net

DotProject中文乱码解决总结-程序员宅基地

文章浏览阅读2.5k次。DotProject中文乱码解决总结Andrew(zhuyi) DotProject是一个基于AMP(apache+mysql+php)的开源项目管理工具,DotProject可以支持多语言并采用模块化设计以便于扩展。最近需要一个项目管理软件,于是就下载DotProject进行了试用,感觉不错,但有中文有乱码问题,如:日历和gantt图。现就对解决DotProject乱码进行一下总结,由于本人以前没接触过PHP,初次修改有错的地方请大家指正。 机器

iphone抓包调试神器—Stream安装和使用_stream抓包软件-程序员宅基地

文章浏览阅读2.6w次,点赞3次,收藏20次。stream是一款免费轻量级移动端ios抓包调试工具,配置方便无需设置代理,集成了HTTP抓包、构建请求、Hosts 设置、常用工具、数据导出等功能。1、苹果手机appstore搜stream并下载2、进入抓包工具,允许配置VPN,下载CA证书3、设置-通用-描述文件,找到下载好的证书,安装成功4、设置-通用-关于手机-证书信任设置,开启信任5、点开始抓包,进入要抓包的app美团外卖,抓好包后 停止抓包6..._stream抓包软件

什么是网络数据包代理(NPB)-为何对您如此重要?-程序员宅基地

文章浏览阅读2k次。在日新月异的 IT 环境中保证网络的安全以及用户的不断发展,需要一系列执行实时分析的复杂工具。您的监控基础设施可能具有网络和应用性能监控(NPM/APM)、数据记录器和传统网络分析仪,而您的防御系统则会利用防火墙、入侵保护系统(IPS)、数据防泄漏(DLP)、反恶意软件和其他解决方案。 无论安全和监控工具有多专业,它们都有两个共同点:需要准确了解网络中发生的一切 分析结果只是基于所收到的..._npb

css 字体间距 设置_css中如何设置页面整体字间距为固定值-程序员宅基地

文章浏览阅读1.8k次。css 字体间距 设置_css中如何设置页面整体字间距为固定值

推荐文章

热门文章

相关标签