个人博客
专注IT梦想的地方

那些CSS之三角形的美丽

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

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

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

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

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

.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来定义,我们插入空内容,然后通过其他样式属性来定义两个三角可以形成带边框的三角形,这样就可以形成一个气泡的样式。

赞(1) 打赏
未经允许,不得转载本站任何文章:智言个人博客 » 那些CSS之三角形的美丽

评论 2

评论前必须登录!

 

  1. #0

    不错学习了,谢谢分享!

    奇虎分享网4年前 (2016-08-23)
  2. #0

    透明很关键

    松露4年前 (2016-06-26)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏