乐趣区

关于前端:使用CSS-做小三角边框原理及实现

前言:

这个也是我最近学习才发现的一个细节,就是经常会在一些网站,看到上面图中这样的一个小三角,以前没怎么学 CSS,我始终认为它是个精灵图之类。😂

我是最近才开始认真学的前端,比纯小白略微懂的略微多一点点。

文章如若有那些不足之处,请及时指出,在此郑重感激。

一、CSS 三角做法

咱们先简略说一下,如何把三角画进去,懂用什么画的之后,根本就完事了。

html 代码:

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

css 代码:

.sanjiao {
    /* 为了难看让它居中 */
    margin: 0 auto;
    /* 高度和宽度必须指定为零 */
    width: 0;
    height: 0;
    /* 给四边都设置边框和色彩 */
    border-bottom: 10px solid #FFD5A1;
    border-top: 10px solid #00A1D6;
    border-left: 10px solid saddlebrown;
    border-right: 10px solid seagreen;
}

咱们先来看看代码成果,之后再议论其余的哈

页面展现成果就是一个四个小三角拼成的正方形。

原理是什么呢?

盒子每一边的边框都是梯形的,盒子大小为 0 时,梯形上底 (边框内边) 也为 0,所以两边会合并成三角形。

原理图大抵就如下:

当最初它两头的盒子宽度、高度都为零,就成了角形。

二、CSS 京东利用

原理晓得了之后,咱们来做一个小小的案例吧。

html 代码:

<div class="main">

    <div class="box1">

    </div>
    <!-- 再写一个 div 来做三角 -->
    <div class="box2">

    </div>
</div>

css 代码:

.mian {
    /* 咱们再给父元素设置一个绝对定位 */
    position: relative;

}

.box1 {
    margin-top:10px;
    width: 100px;
    height: 100px;
    background-color: #81c784;
    border-radius:5px;
}

.box2 {

    width: 0px;
    height: 0px;
    /* 设置四边边框宽度,将色彩设置为通明 */
    border: 10px solid transparent;

    /* 再进行上面的设置,这样之后就会呈现一个紫色向上的一个小三角 */
    border-bottom: 10px solid #E1BEE7;
    position: absolute;
    left: 80px;
    top: -10px;

}
</style>

最初的成绩大抵如下:

css 这个边框还有很多能够玩,还在学习中 …

三、喃喃自语

最近在学 css,说真的,感觉的确比后端要好玩很多,创意也多很多,不会像后端那么固定(增删改查😂)。

目前还是前端小白,心愿大家多多体谅,正在致力中。

纸上得来终觉浅,绝知此事要躬行。

大家好,我是博主 宁在春:主页

一名喜爱文艺却踏上编程这条路线的小青年。

心愿:咱们,待别日相见时,都已有所成

一个可恶的猫咪小表情,切实太可恶了,没方法抵御住引诱啊。

退出移动版