那些CSS之三角形的美丽

智言 2016-06-04 3 分钟阅读 2 评论

好吧，这是一篇很简单的文章，或许是因为群里很多朋友在问，所以就把网络上的一些资料分享到这里，让大家更集中的阅读呗。

首先，我们讲讲如何用CSS构建一个三角形，CSS代码如下：

code

.demo{
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-bottom: 10px solid #f6f6f6;
    border-right: 6px solid transparent;
    font-size: 0px;
    line-height: 0px;
 }

然后就可以构建一个三角形了！是不是很简单，具体可以在百度中查下咯！

然后接下来才是重点，构建一个气泡，可以说把三角形进行了一个优化，代码如下：

code

.demo2{
    background: #eee;
    border: 1px solid #ccc;
    padding: 10px;
    border-radius: 8px;
    position: relative;
    width: 200px;
    margin-left: 50px;
    margin-top: 50px;
 }
 .demo2:after{
    position: absolute;
    display: inline-block;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-right: 10px solid red;
    left: -10px;
    top: 20px;
    content: '';
 }
 .demo2:before{
    position: absolute;
    display: inline-block;
    border-top: 20px solid transparent;
    border-right: 20px solid green;
    border-bottom: 20px solid transparent;
    left: -20px;
    top: 10px;
    content: '';
 }

我们知道，after和before分别是在元素之前和之后插入内容，而内容通过content来定义，我们插入空内容，然后通过其他样式属性来定义两个三角可以形成带边框的三角形，这样就可以形成一个气泡的样式。

#after #before #CSS #三角形

读完了点一下，作者能得积分

赞赏

如果这篇内容帮到了你，不妨请作者喝杯咖啡

那些CSS之三角形的美丽

2 条评论

发表评论取消回复

2 条评论

发表评论 取消回复

发表评论取消回复