"原来 css 中的 border 还可以这样玩前面的话：　　在看这篇文章之前你可能会觉得 border 只是简单的绘制边框，看了这篇文章，我相信你也会跟我一样说一句“我靠，原来 css 中的 border 还可以这样玩”。这篇文章主要是很早以前看了别人用纯 CSS 绘制三角形后自己的一些思路的整 ...."

someone1
AI专业者开发社区 1 号成员
AI开发者社区 • 0 回帖 • 5 浏览 • 4 个月前

原来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: 50%;
}

结果如图：

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

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

　　实现：我们分别改变 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 在一起拼成简单的小木屋效果……）

补充：

　　1、在我们思考一的前面那张图，我们可以看到其实那中间的几个分别是梯形，用同样的方法，我们可以得到梯形的效果（具体做法不再另外介绍）。

　　2、通过旋转，我们可以将我们的正方形变成菱形的效果

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

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

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

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

思路：用伪元素：after 和:before，然后在各自的区域绘制图形

参考代码如下：

<!DOCTYPE html>
<html>
&lt;head&gt;
    &lt;meta charset=<span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(128, 0, 0, 1)">UTF-8</span><span style="color: rgba(128, 0, 0, 1)">"</span>&gt;
    &lt;title&gt;六边形的制作&lt;/title&gt;
    &lt;style type=<span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(128, 0, 0, 1)">text/css</span><span style="color: rgba(128, 0, 0, 1)">"</span>&gt;<span style="color: rgba(0, 0, 0, 1)">
        #hexagon {
            width: 100px;
            height: 55px;
            background: #fc5e5e;
            position: relative;
            margin: 100px auto;
        }
        
        #hexagon:before {
            content: </span><span style="color: rgba(128, 0, 0, 1)">""</span><span style="color: rgba(0, 0, 0, 1)">;
            width: </span><span style="color: rgba(128, 0, 128, 1)">0</span><span style="color: rgba(0, 0, 0, 1)">;
            height: </span><span style="color: rgba(128, 0, 128, 1)">0</span><span style="color: rgba(0, 0, 0, 1)">;
            position: absolute;
            top: </span>-<span style="color: rgba(0, 0, 0, 1)">25px;
            left: </span><span style="color: rgba(128, 0, 128, 1)">0</span><span style="color: rgba(0, 0, 0, 1)">;
            border</span>-<span style="color: rgba(0, 0, 0, 1)">left: 50px solid transparent;
            border</span>-<span style="color: rgba(0, 0, 0, 1)">right: 50px solid transparent;
            border</span>-<span style="color: rgba(0, 0, 0, 1)">bottom: 25px solid yellow;
        }
        
        #hexagon:after {
            content: </span><span style="color: rgba(128, 0, 0, 1)">""</span><span style="color: rgba(0, 0, 0, 1)">;
            width: </span><span style="color: rgba(128, 0, 128, 1)">0</span><span style="color: rgba(0, 0, 0, 1)">;
            height: </span><span style="color: rgba(128, 0, 128, 1)">0</span><span style="color: rgba(0, 0, 0, 1)">;
            position: absolute;
            bottom: </span>-<span style="color: rgba(0, 0, 0, 1)">25px;
            left: </span><span style="color: rgba(128, 0, 128, 1)">0</span><span style="color: rgba(0, 0, 0, 1)">;
            border</span>-<span style="color: rgba(0, 0, 0, 1)">left: 50px solid transparent;
            border</span>-<span style="color: rgba(0, 0, 0, 1)">right: 50px solid transparent;
            border</span>-<span style="color: rgba(0, 0, 0, 1)">top: 25px solid aqua;
        }
    </span>&lt;/style&gt;
&lt;/head&gt;

&lt;body&gt;
    &lt;div id=<span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(128, 0, 0, 1)">hexagon</span><span style="color: rgba(128, 0, 0, 1)">"</span>&gt;&lt;/div&gt;
&lt;/body&gt;

</html>

（当然这里知识介绍了一种情况，也可以尝试三角形所在的边不一样）

多角星的制作（以六角星为例）

分析：试着用前面的方法，我们分析六角星的结构，我们可以理解为一个六角星是由两个三角形一起重叠而成的，接下来就好办了，我们直接看代码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title> 六角星 </title>
        <style type="text/css">
        div {
            width: </span><span style="color: rgba(128, 0, 128, 1)">0</span><span style="color: rgba(0, 0, 0, 1)">;
            height: </span><span style="color: rgba(128, 0, 128, 1)">0</span><span style="color: rgba(0, 0, 0, 1)">;
            display: block;
            position: absolute;
            border</span>-<span style="color: rgba(0, 0, 0, 1)">left: 100px solid transparent;
            border</span>-<span style="color: rgba(0, 0, 0, 1)">right: 100px solid transparent;
            border</span>-<span style="color: rgba(0, 0, 0, 1)">bottom: 200px solid #de34f7;
            margin: 10px auto;
        }
          
        div:after {
            content: </span><span style="color: rgba(128, 0, 0, 1)">""</span><span style="color: rgba(0, 0, 0, 1)">;
            </span><span style="color: rgba(0, 128, 0, 1)">/*</span><span style="color: rgba(0, 128, 0, 1)">content插入内容</span><span style="color: rgba(0, 128, 0, 1)">*/</span><span style="color: rgba(0, 0, 0, 1)">
            width: </span><span style="color: rgba(128, 0, 128, 1)">0</span><span style="color: rgba(0, 0, 0, 1)">;
            height: </span><span style="color: rgba(128, 0, 128, 1)">0</span><span style="color: rgba(0, 0, 0, 1)">;
            position: absolute;
            border</span>-<span style="color: rgba(0, 0, 0, 1)">left: 100px solid transparent;
            border</span>-<span style="color: rgba(0, 0, 0, 1)">right: 100px solid transparent;
            border</span>-<span style="color: rgba(0, 0, 0, 1)">top: 200px solid #de34f7;
            margin: 60px </span><span style="color: rgba(128, 0, 128, 1)">0</span> <span style="color: rgba(128, 0, 128, 1)">0</span> -<span style="color: rgba(0, 0, 0, 1)">100px;
        }
    </span>&lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;div&gt;&lt;/div&gt;
&lt;/body&gt;

</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);
        }
    </span>&lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;div id=<span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(128, 0, 0, 1)">star</span><span style="color: rgba(128, 0, 0, 1)">"</span>&gt;&lt;/div&gt;
&lt;/body&gt;

</html>

CSS 小图标效果：

　　到这里，你是不是还没看过瘾呢？下面在来分享一下自己做的 CSS 小图标：对话框的制作

　　对话框的制作：

　　分析：对话框由一个三角形和一个圆角举行组成

　　实现：代码如下：

<!DOCTYPE html>
<html>
&lt;head&gt;
    &lt;meta charset=<span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(128, 0, 0, 1)">UTF-8</span><span style="color: rgba(128, 0, 0, 1)">"</span>&gt;
    &lt;title&gt;&lt;/title&gt;
    &lt;style type=<span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(128, 0, 0, 1)">text/css</span><span style="color: rgba(128, 0, 0, 1)">"</span>&gt;
        *<span style="color: rgba(0, 0, 0, 1)"> {
            margin: 0px;
            padding: 0px;
        }
        
        div {
            margin: 100px;
        }
        
        #comment_bubble {
            width: 300px;
            height: 100px;
            background: #088cb7;
            position: relative;
            </span>-moz-border-<span style="color: rgba(0, 0, 0, 1)">radius: 12px;
            </span>-webkit-border-<span style="color: rgba(0, 0, 0, 1)">radius: 12px;
            border</span>-<span style="color: rgba(0, 0, 0, 1)">radius: 12px;
        }
        
        #comment_bubble:before {
            content: </span><span style="color: rgba(128, 0, 0, 1)">""</span><span style="color: rgba(0, 0, 0, 1)">;
            width: </span><span style="color: rgba(128, 0, 128, 1)">0</span><span style="color: rgba(0, 0, 0, 1)">;
            height: </span><span style="color: rgba(128, 0, 128, 1)">0</span><span style="color: rgba(0, 0, 0, 1)">;
            right: </span><span style="color: rgba(128, 0, 128, 1)">100</span>%<span style="color: rgba(0, 0, 0, 1)">;
            top: 38px;
            position: absolute;
            border</span>-<span style="color: rgba(0, 0, 0, 1)">top: 13px solid transparent;
            border</span>-<span style="color: rgba(0, 0, 0, 1)">right: 26px solid #088cb7;
            border</span>-<span style="color: rgba(0, 0, 0, 1)">bottom: 13px solid transparent;
        }
    </span>&lt;/style&gt;
&lt;/head&gt;

&lt;body&gt;
    &lt;p&gt;消息提示框可以先制作一个圆角矩形，然后在需要的地方放置一个三角形。&lt;/p&gt;
    &lt;div id=<span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(128, 0, 0, 1)">comment_bubble</span><span style="color: rgba(128, 0, 0, 1)">"</span>&gt;

    &lt;/div&gt;
&lt;/body&gt;

</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;
}

原来css中的border还可以这样玩

原来 css 中的 border 还可以这样玩

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

用 css 中的 border 画三角形：

关于三角形的扩展的一些思考：

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

多角星的制作（以六角星为例）

CSS 小图标效果：

后面的话：

搜索按钮：

用 css 做自己的 logo

相关帖子

随便看看

原来css中的border还可以这样玩