用CSS3实现带小三角形的div框(不用图片)

最新推荐文章于 2022-05-25 10:15:48 发布

转载最新推荐文章于 2022-05-25 10:15:48 发布 · 2.6k 阅读

本文介绍如何使用 CSS3 的 border 和 transparent 属性制作带小三角形的方框，包括向上、下、左、右不同方向的三角形，并通过实战演示具体步骤。

部署运行你感兴趣的模型镜像

现在看到了很多带小三角形的方框，如微信、Mac版的QQ、QQ空间的时间轴等等，在聊天或者是发表的状态的内容外面都有一个带小三角形的矩形框包围着，感觉看着很不错，于是决定亲自动手写一个，我上次用的是偏移背景图片法，那么今天就不用图片，用CSS3实现一下，下面我们来看一下实现代码。

首先我们来看一下CSS3实现三角形原理：其实就是对于transparent的应用

假如html代码是这样的

<div class="arrow-up">

     <!--向上的三角-->

</div>

<div class="arrow-down">

    <!--向下的三角-->

</div>

<div class="arrow-left">

    <!--向左的三角-->

</div>

<div class="arrow-right">

    <!--向右的三角-->

</div>

下面用CSS3分别实现向上、下、左、右的三角形

/*箭头向上*/

.arrow-up
 {

    width:0;

    height:0;

    border-left:30px solid transparent;

    border-right:30px solid transparent;

    border-bottom:30px solid #fff;

}

 /*箭头向下*/

.arrow-down
 {

    width:0;

    height:0;

    border-left:20px solid transparent;

    border-right:20px solid transparent;

    border-top:20px solid #0066cc;

}

 /*箭头向左*/

.arrow-left {

    width:0;

    height:0;

    border-top:30px solid transparent;

    border-bottom:30px solid transparent;

    border-right:30px solid yellow;

}

/*箭头向右*/

.arrow-right {

    width:0;

    height:0;

    border-top:50px solid transparent;

    border-bottom:
50px solid transparent;

    border-left:
50px solid green;

}

ok代码整理在一起后，效果大概是这样的：

好了原理我们了解了，那么我们就实战一下吧，来实现带小三角形的div框。

首先，写出html代码：

<div class="entry">

    <div class="entry-trangle"><!--本Div只来实现三角形，无其他作用--></div>

    hello，我出生了<br/>

    hello，我出生了<br/>

    hello，我出生了<br/>

    hello，我出生了<br/>

</div>

挂载有类"entry-trangle"的div只用来实现小三角形。对这个div用css3的transparent实现三角形，然后绝对定位、设置z-index:-1;、margin-left:-19px;，看下面css代码：

<style
 type="text/css">

    *{margin:0;padding:0;}

    body{

        background:#666;

        font:14px/20px "Microsoft
 YaHei";

    }

    .entry{

        margin:0 auto;

        margin-top:20px;

        width:280px;           

        background:#fff;

        padding:10px;

        /*设置圆角*/

        -webkit-border-radius:5px;

        -moz-border-radius:5px;

        border-radius:5px;

    }

    .entry-trangle{

        position:absolute;

        margin-left:-19px;

        width:0;

        height:0;

        border-top:10px solid transparent;

        border-bottom:10px solid transparent;

        border-right:10px solid #fff;

        z-index:-1;

    }

</style>