原来css中的border还可以这样玩
原来css中的border还可以这样玩
前面的话：
在看这篇文章之前你可能会觉得border只是简单的绘制边框，看了这篇文章，我相信你也会跟我一样说一句“我靠，原来css中的border还可以这样玩”。这篇文章主要是很早以前看了别人用纯CSS绘制三角形后自己的一些思路的整理，文中会介绍几种小图标的效果。
用css中的border绘制鸡蛋形状：
是的你没看错，这里是要做绘制一个类似于鸡蛋的效果。
思路：我们先用div绘制一个正方形，然后利用设置border-radius: 50%;，这样我们就可以得到一个圆形的效果，代码如下：
html代码：
<div class="div"></div>
css代码：
.div {
width: 100px;
height: 100px;
line-height: 100px;
background-color: aqua;
text-align: center;
border-radius: %;
}
结果如图：
思考：分析鸡蛋型结构，鸡蛋有点椭，但是它分大头和小头。我们有没有什么办法先让之前的圆变为椭圆呢？
思路：我们改变div的宽度或高度，让它们不一致，看能不能得到我们想要的效果。
实现：我们分别改变width:50px;或height:50px;（只改变其中的一个），这时我们得到的效果分别为：
思考：我们已经得到椭圆效果了，接下来我们如何实现大头和小头的效果呢？
思路一：我们再把椭圆进行分割然后控制宽度不一致。（此种方法不成功）
思路二：我们设置border-radius的百分比。当border-radius: 100%;与前一种方法的截图如下：
再次尝试将border-radius的百分比的值进行分离（不要简写，直接写成4个），然后控制百分比不一致。关键代码：
border-radius: % % % % / % % % %;
此时得到的效果截图：
用css中的border画三角形：
相信大家都知道border-color是控制边框颜色的，但是你可能没这样试过，来看下面的代码：
html：
<div class="div"></div>
css：
.div {
width: 100px;
height: 100px;
border: 50px solid transparent;
border-color: yellow green red aqua;
}
这样的结果为：
思考一：如果该div没有宽高会怎样？
实现结果：
思考二：前面的效果得到的是四个三角形，我们有没有什么办法将三角形从那个div中分离出来呢？
思路：目前没有接触过有关div分离的（具体也应该不存在吧），但是我们来扣一扣CSS的定义“层叠样式”，转换我们的思维，我们有没有什么方法将我们不想要的三角形覆盖掉？
具体做法：将我们需要的那边的颜色设置为我们的背景色--白色，对的这样就可以得到我们想要的效果。代码如下（以想要上边的三角形为例）：
border-color: yellow white white white;
是不是这样就算完成我们的三角形效果了呢？
我们可以试试修改整个body的背景颜色为黑色，看有什么变化：
发现该div仍占据着那么大的空间，并且背景颜色设置为白色并不是最科学
思考四：我们该如何将不想要的颜色设置为消失呢？
思路：我们将不想要表现出来的颜色设置为父级容器的背景色，border-color: yellow transparent transparent transparent;
结果如下：
思考三：我们如何将div设置不占那么大的空间呢？
思路：直接将想要的三角形的对边的border的宽度去掉
具体做法：（这次以想要下面的三角形为例），代码如下：
div{
width:0px;
height: 0px;
border-bottom: 50px solid red;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
}
结果如图：
关于三角形的扩展的一些思考：
思考一：我们平时的三角形有锐角三角形，钝角三角形，直角三角形，等边三角形，等腰三角形等，我们有什么办法让我们直接得到的就是我们想要的三角形效果不？
思路：当底边和水平线平行时，我们直接通过控制宽高比来实现我们想要的三角形效果；当与水平线不重合时这个时候就比较复杂了，就需要用到宽高比和CSS3中的transform属性和rotate相结合，让我们的三角形呈现出我们想要的效果（这里只是介绍思路，不去具体实现，其中有涉及到数学方面的知识可以自己百度）。
思考二：我们能不能用多个三角形在一起拼出更多的形状？
（这个可以有，比如说我们可以用两个三角形和一个长方形拼成平行四边形，甚至说我们用多个div在一起拼成简单的小木屋效果……）
补充：
1、在我们思考一的前面那张图，我们可以看到其实那中间的几个分别是梯形，用同样的方法，我们可以得到梯形的效果（具体做法不再另外介绍）。
2、通过旋转，我们可以将我们的正方形变成菱形的效果
多边形的制作（以六边形为例）
首先我们分析一下六边形，看能不能把它分解成我们前面有说过的简单的图形，下面看图：
分析：以上面的为例，我们可以看出六边形由两个三角形和一个矩形构成。
思考一：我们有没有什么方法将这三个图形拼在一起？
思路：用伪元素：after和:before，然后在各自的区域绘制图形
参考代码如下：
<!DOCTYPE html>
<html> <head>
<meta charset="UTF-8">
<title>六边形的制作</title>
<style type="text/css">
#hexagon {
width: 100px;
height: 55px;
background: #fc5e5e;
position: relative;
margin: 100px auto;
} #hexagon:before {
content: "";
width: ;
height: ;
position: absolute;
top: -25px;
left: ;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 25px solid yellow;
} #hexagon:after {
content: "";
width: ;
height: ;
position: absolute;
bottom: -25px;
left: ;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-top: 25px solid aqua;
}
</style>
</head> <body>
<div id="hexagon"></div>
</body> </html>
（当然这里知识介绍了一种情况，也可以尝试三角形所在的边不一样）
多角星的制作（以六角星为例）
分析：试着用前面的方法，我们分析六角星的结构，我们可以理解为一个六角星是由两个三角形一起重叠而成的，接下来就好办了，我们直接看代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>六角星</title>
<style type="text/css"> div {
width: ;
height: ;
display: block;
position: absolute;
border-left: 100px solid transparent;
border-right: 100px solid transparent;
border-bottom: 200px solid #de34f7;
margin: 10px auto;
} div:after {
content: "";
/*content插入内容*/
width: ;
height: ;
position: absolute;
border-left: 100px solid transparent;
border-right: 100px solid transparent;
border-top: 200px solid #de34f7;
margin: 60px -100px;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
最终实现效果如图：
五角星的制作（实际操作起来比六角星困难）：我们先自己画一个五角星，然后将其分割为三个，然后利用前面的步骤去实现，这里我只是列出一种方法作为参考（其中有几个细节的处理有点复杂），分析图如下：
参考代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#star{
width: 0px;
height: 0px;
margin: 50px ;
color: red;
position: relative;
display: block;
border-bottom: 70px solid red;
border-left: 100px solid transparent;
border-right: 100px solid transparent;
-webkit-transform: rotate(35deg);
}
#star:before{
content: '';
width: 0px;
height: 0px;
margin: 50px ;
color: yellow;
position: relative;
display: block;
border-bottom: 80px solid yellow;
border-left: 30px solid transparent;
border-right: 30px solid transparent;
-webkit-transform: rotate(-35deg);
top: -45px;
left: -65px;
}
#star:after{
content: '';
width: ;
height: ;
position: absolute;
display: block;
top: 3px;
left: -105px;
color: #fc2e5a;
border-right: 100px solid transparent;
border-bottom: 70px solid #fc2e5a;
border-left: 100px solid transparent;
-webkit-transform: rotate(-70deg);
-moz-transform: rotate(-70deg);
-ms-transform: rotate(-70deg);
-o-transform: rotate(-70deg); }
</style>
</head>
<body>
<div id="star"></div>
</body>
</html>
CSS小图标效果：
到这里，你是不是还没看过瘾呢？下面在来分享一下自己做的CSS小图标：对话框的制作
对话框的制作：
分析：对话框由一个三角形和一个圆角举行组成
实现：代码如下：
<!DOCTYPE html>
<html> <head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
* {
margin: 0px;
padding: 0px;
} div {
margin: 100px;
} #comment_bubble {
width: 300px;
height: 100px;
background: #088cb7;
position: relative;
-moz-border-radius: 12px;
-webkit-border-radius: 12px;
border-radius: 12px;
} #comment_bubble:before {
content: "";
width: ;
height: ;
right: %;
top: 38px;
position: absolute;
border-top: 13px solid transparent;
border-right: 26px solid #088cb7;
border-bottom: 13px solid transparent;
}
</style>
</head> <body>
<p>消息提示框可以先制作一个圆角矩形，然后在需要的地方放置一个三角形。</p>
<div id="comment_bubble"> </div>
</body>
</html>
实现结果：
后面的话：
虽然这些效果看上去并不是那么的酷，但是记得自己刚开始学到这个的时候好兴奋好激动的说。当时做了更多的效果（但是前几天电脑换系统以前的那些都没了），所以展示的也只是很简单的效果。现在还能回忆起来的就这么多，后面想到了会陆续补充。大家有什么好的效果欢迎在下面分享。
2016年10月22日更新
搜索按钮：
效果：
代码：
.sousuo {
font-size: 10em;
display: inline-block;
width: .4em; height: .4em;
border: .1em solid red;
border-radius: %;
position: relative;
}
.sousuo:before {
content: '';
display: inline-block;
position: absolute;
right: -.25em;
bottom: -.1em;
border-width: ;
background: red;
width: .3em;
height: .14em;
-webkit-transform:
rotate(45deg);
}
用css做自己的logo
效果：
代码：
html部分：
<ul class="foodoir">
<li class="f"></li>
<li class="o"></li>
<li class="o"></li>
<li class="d"></li>
<li class="o"></li>
<li class="i"></li>
<li class="r"></li>
</ul>
css部分：
ul {
width: 210px;
height: 100px;
list-style-type: none;
}
li {
width: 30px;
height: 100px;
background: red;
float: left;
}
.f {
background-color: transparent;
border-bottom: ;
position: relative;
overflow: hidden;
}
.f::before {
content: '';
position: absolute;
width: 40px;
height: 100px;
background-color: transparent;
border: 10px solid #;
border-radius: 25px;
bottom: -25px;
right: -40px;
}
.f::after {
content: '';
position: absolute;
width: 30px;
height: 10px;
background-color: #;
top: 35px;
right: 0px;
}
.o{
background-color: transparent;
position: relative;
}
.o::before{
content: '';
position: absolute;
width: 10px;
height: 16px;
border: 9px solid #;
border-radius: %;
top: 40px;
left: 1px;
}
.d{
background-color: transparent;
position: relative;
}
.d::before{
content: '';
position: absolute;
width: 10px;
height: 16px;
border-color: #;
border-style: solid;
border-width: 9px 9px 9px 9px;
border-radius: % % % %;
top: 40px;
left: 1px;
}
.d::after{
content: '';
position: absolute;
width: 5px;
height: 40px;
border-color: #;
border-width: 9px 0px 0px 9px;
border-style: solid;
border-radius: % ;
top: 5px;
left: 20px;
}
.i{
width: 16px;
background-color: transparent;
position: relative;
}
.i::before{
content: '';
position: absolute;
width: 12px;
height: 30px;
background-color: #;
top: 45px;
left: 2px;
}
.i::after{
content: '';
position: absolute;
width: ;
height: ;
border: 6px solid #;
border-radius: %;
top: 30px;
left: 2px;
}
.r{
width: 15px;
background-color: transparent;
position: relative;
}
.r::before{
content: '';
position: absolute;
width: 10px;
height: 31px;
background-color: #;
top: 44px;
left: 2px;
}
.r::after{
content: '';
position: absolute;
width: 10px;
height: 10px;
border-color: #;
border-width: 8px 0px 0px 10px;
border-style: solid;
border-radius: % ;
top: 45px;
left: 2px;
}
原来css中的border还可以这样玩的更多相关文章
- css中的border还可以这样玩
在看这篇文章之前你可能会觉得border只是简单的绘制边框,看了这篇文章,我相信你也会跟我一样说一句"我靠,原来css中的border还可以这样玩".这篇文章主要是很早以前看了别人 ...
- 关于css中的border
我一直以为css中的border是正方形的 像这样 因为我平时用的时候都是 border:1px solid #000,都是同一个颜色所以看不出来 当我给每一个边分别设置颜色的时候才发现 他们是以梯形 ...
- css中元素border属性的构成以及配合属性值transparent可得到一些特殊形状1.0
css中我们经常使用到元素的border属性和属性值transparent,可能好多人还不太了解border的构成以及配合transparent的一些效果: 1.border的构成如下所示: ht ...
- CSS中设置border:none和border:0的区别
在我们设置CSS的时候,对标签元素不设置边框属性或者取消边框属性一般设置为:border:none;或border:0;两种方法均可. border:none;与border:0;的区别体现有两点:一 ...
- 利用css中的border生成三角，兼容包括IE6的主流浏览器
1.生成四个不同颜色方向的梯形 #ladder{ width:20px; height:20px; border:10px solid; border-color:#ff3300 #0000ff #3 ...
- 深入理解之css中的border属性
1. border-width:不支持不百分比 1)受本身的使用场景决定. 例子:左边为手机,右边为显示器,但是他们边框的宽度是差不多的,不会因为设备大就让边框宽度变大. 2. border-widt ...
- 给表格设置border还可以这样玩
<table width="100%" border="0" cellpadding="0" cellspacing="1& ...
- clip-path 教程：使用 CSS 中的 clip-path 轻松实现多边形
作为一个前端开发,一个主要的工作就是来实现设计师设计的UI界面.而在UI界面中,各种各样的形状元素应用则是随处可见,比如三角形: 以前碰到这种形状的时候,会使用各种黑科技的技巧,比如使用CSS中的bo ...
- 纯css来画图-border应用
基础知识: Css画图大部分是使用了css中的border来绘画图形,那首先我们就来看下border的基础知识,至于其他的遇到了再讲吧! Border的基础知识: 一般我们这样简写: border: ...
随机推荐
- SQL——行值表达式（Row Value Expressions）
概述 最近接触了一个新概念——行值表达式,也叫做行值构造器.这是一个很强大的SQL功能,通常我们所操作的SQL表达式都只能针对一行中的单一字段进行操作比较,而行值表达式可以针对一行中的多个字段进行操作 ...
- [转]html5表单上传控件Files API
表单上传控件:<input type="file" />(IE9及以下不支持下面这些功能,其它浏览器最新版本均已支持.) 1.允许上传文件数量 允许选择多个文件:< ...
- 对 griview获取的数据添加方法 6月
<asp:TemplateField HeaderText="日期"> <HeaderStyle CssCl ...
- Oracle_R12C_安装注意点_Win64_exectask
安装问题1 原因 - 无法访问临时位置. 操作 - 请确保当前用户具有访问临时位置所需的权限. 附加信息: - 所有节点上的框架设置检查都失败 -原因: 问题的原因不可用 -操作:用户操作不可用 失败 ...
- 如何识别一个字符串是否Json格式
前言: 距离上一篇文章,又过去一个多月了,近些时间,工作依旧很忙碌,除了管理方面的事,代码方面主要折腾三个事: 1:开发框架(一整套基于配置型的开发体系框架) 2:CYQ.Data 数据层框架(持续的 ...
- SQL Server 中的事务与事务隔离级别以及如何理解脏读, 未提交读,不可重复读和幻读产生的过程和原因
原本打算写有关 SSIS Package 中的事务控制过程的,但是发现很多基本的概念还是需要有 SQL Server 事务和事务的隔离级别做基础铺垫.所以花了点时间,把 SQL Server 数据库中 ...
- 让Ajax更简单
之前写了一篇 ASP.NET中一种超简单的Ajax解决方案 最近把他拿出来更新了下,把demo也搞的更详细了一点 加入了blqw.Json,所以支持更多类型参数和返回值 优化了对exception的处 ...
- Functional Programming without Lambda - Part 2 Lifting, Functor, Monad
Lifting Now, let's review map from another perspective. map :: (T -> R) -> [T] -> [R] accep ...
- C语言 · 最小乘积(基本型)
问题描述 给两组数,各n个. 请调整每组数的排列顺序,使得两组数据相同下标元素对应相乘,然后相加的和最小.要求程序输出这个最小值. 例如两组数分别为:1 3 -5和-2 4 1 那么对应乘积取和的最小 ...
- Atitit 动态调用webservice与客户端代理方式调用
Atitit 动态调用webservice与客户端代理方式调用 方式1: 使用call.invoke 直接调用WSDL,缺点:麻烦,不推荐--特别是JAVA调用.NET的WS时,会有不少的问题需要解 ...