原来css中的border还能够这样玩

时间 2019-12-17

标签原来 css border 能够这样栏目 CSS 繁體版

原文原文链接

原来css中的border还能够这样玩

前面的话：css

　　在看这篇文章以前你可能会以为border只是简单的绘制边框，看了这篇文章，我相信你也会跟我同样说一句“我靠，原来css中的border还能够这样玩”。这篇文章主要是很早之前看了别人用纯CSS绘制三角形后本身的一些思路的整理，文中会介绍几种小图标的效果。html

用css中的border绘制鸡蛋形状：

　　是的你没看错，这里是要作绘制一个相似于鸡蛋的效果。web

　　思路：咱们先用div绘制一个正方形，而后利用设置border-radius: 50%;，这样咱们就能够获得一个圆形的效果，代码以下：spa

html代码：3d

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

css代码：code

.div {
    width: 100px;
    height: 100px;
    line-height: 100px;
    background-color: aqua;
    text-align: center;
    border-radius: 50%;
}

结果如图：orm

　　思考：分析鸡蛋型结构，鸡蛋有点椭，可是它分大头和小头。咱们有没有什么办法先让以前的圆变为椭圆呢？htm

　　思路：咱们改变div的宽度或高度，让它们不一致，看能不能获得咱们想要的效果。blog

　　实现：咱们分别改变width:50px;或height:50px;（只改变其中的一个），这时咱们获得的效果分别为：数学

　　思考：咱们已经获得椭圆效果了，接下来咱们如何实现大头和小头的效果呢？

　　思路一：咱们再把椭圆进行分割而后控制宽度不一致。（此种方法不成功）

　　思路二：咱们设置border-radius的百分比。当border-radius: 100%;与前一种方法的截图以下：

　　再次尝试将border-radius的百分比的值进行分离（不要简写，直接写成4个），而后控制百分比不一致。关键代码：

border-radius: 50% 50% 50% 50% / 62% 62% 38% 38%;

　此时获得的效果截图：

用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在一块儿拼成简单的小木屋效果……）

补充：

　　一、在咱们思考一的前面那张图，咱们能够看到其实那中间的几个分别是梯形，用一样的方法，咱们能够获得梯形的效果（具体作法再也不另外介绍）。

　　二、经过旋转，咱们能够将咱们的正方形变成菱形的效果

多边形的制做（以六边形为例）

首先咱们分析一下六边形，看能不能把它分解成咱们前面有说过的简单的图形，下面看图：

分析：以上面的为例，咱们能够看出六边形由两个三角形和一个矩形构成。

思考一：咱们有没有什么方法将这三个图形拼在一块儿？

思路：用伪元素：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: 0;
                height: 0;
                position: absolute;
                top: -25px;
                left: 0;
                border-left: 50px solid transparent;
                border-right: 50px solid transparent;
                border-bottom: 25px solid yellow;
            }
            
            #hexagon:after {
                content: "";
                width: 0;
                height: 0;
                position: absolute;
                bottom: -25px;
                left: 0;
                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: 0;
                height: 0;
                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: 0;
                height: 0;
                position: absolute;
                border-left: 100px solid transparent;
                border-right: 100px solid transparent;
                border-top: 200px solid #de34f7;
                margin: 60px 0 0 -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 0;
                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 0;
                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: 0;
                height: 0;
                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: 0;
                height: 0;
                right: 100%;
                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: 0.4em; height: 0.4em; 
    border: 0.1em solid red; 
    border-radius: 50%;    
    position: relative; 
}
            
.sousuo:before { 
    content: ''; 
    display: inline-block; 
    position: absolute; 
    right: -0.25em; 
    bottom: -0.1em; 
    border-width: 0; 
    background: red; 
    width: 0.3em; 
    height: 0.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: 0;
    position: relative;
    overflow: hidden;
}

.f::before {
    content: '';
    position: absolute;
    width: 40px;
    height: 100px;
    background-color: transparent;
    border: 10px solid #000;
    border-radius: 25px;
    bottom: -25px;
    right: -40px;
}

.f::after {
    content: '';
    position: absolute;
    width: 30px;
    height: 10px;
    background-color: #000;
    top: 35px;
    right: 0px;
}
.o{
    background-color: transparent;
    position: relative;
}
.o::before{
    content: '';
    position: absolute;
    width: 10px;
    height: 16px;
    border: 9px solid #000;
    border-radius: 80%;
    top: 40px;
    left: 1px;
}

.d{
    background-color: transparent;
    position: relative;
}
.d::before{
    content: '';
    position: absolute;
    width: 10px;
    height: 16px;
    border-color: #000;
    border-style: solid;
    border-width: 9px 9px 9px 9px;
    border-radius: 50% 50% 0% 50%;
    top: 40px;
    left: 1px;
}
.d::after{
    content: '';
    position: absolute;
    width: 5px;
    height: 40px;
    border-color: #000;
    border-width: 9px 0px 0px 9px;
    border-style: solid;
    border-radius: 100% 0 0 0;
    top: 5px;
    left: 20px;
}
.i{
    width: 16px;
    background-color: transparent;
    position: relative;
}
.i::before{
    content: '';
    position: absolute;
    width: 12px;
    height: 30px;
    background-color: #000;
    top: 45px;
    left: 2px;
}
.i::after{
    content: '';
    position: absolute;
    width: 0;
    height: 0;
    border: 6px solid #000;
    border-radius: 50%;
    top: 30px;
    left: 2px;
}
.r{
    width: 15px;
    background-color: transparent;
    position: relative;
}
.r::before{
    content: '';
    position: absolute;
    width: 10px;
    height: 31px;
    background-color: #000;
    top: 44px;
    left: 2px;
}
.r::after{
    content: '';
    position: absolute;
    width: 10px;
    height: 10px;
    border-color: #000;
    border-width: 8px 0px 0px 10px;
    border-style: solid;
    border-radius: 400% 0 0 0;
    top: 45px;
    left: 2px;
}