码迷,mamicode.com
首页 > Web开发 > 详细

Effective前端1---chapter 2 用CSS画一个三角形

时间:2018-09-29 19:24:02      阅读:181      评论:0      收藏:0      [点我收藏+]

标签:idt   一个   img   before   com   round   inf   增加   nbsp   

1.CSS画三角形的画法

第一步:三角形可以用border画出来,首先一个有四个border的div长这样:

<div class="triangle"></div>
<style>
        .triangle{
            margin: 100px;
            border-top: 40px solid #000;
            border-bottom: 40px solid #333;
            border-left: 40px solid #666;
            border-right: 40px solid #999;
            width: 100px;
            height: 100px;
            background-color: #ccc;
       }
</style>
技术分享图片

第二步:然后把它的宽和高都去掉,width:0;height:0;变成如下图:

技术分享图片

第三步:把border-top去掉,这样就把上面的区域给裁掉了,如下图:

border-top:none;

技术分享图片

第四步:把左右border变为透明状态,此时我们就得到了三角形。如下:

border-left: 40px solid transparent;
border-right: 40px solid transparent;
技术分享图片

另外根据不同border的透明,可以实现斜边不同位置的三角形;如下

 技术分享图片

2.控制三角形的角度

通过控制三角形的角度,可以实现直角三角形和等边三角形。

首先,我们可以保持border-left和border-right大小不变,让border-bottom不断变大,观察下形状变化:

技术分享图片

可以看到顶部的角度在不断变小,其实就是三角形的底边长度不变,而高在不断变化,因为border-bottom-width就是三角形的高。

另外,我们可以让border-left不断变大,保持其他两个border不变,观察效果:

技术分享图片

通过比较可以看出,border-left的变大增加了左边那条边的长度,由此可以想到,如果右边的border-width是0的话,那么将形成一个直角三角形。

技术分享图片border-right:0的状态下,可以使一个直角三角形。

3.画一个对话框可以常用到的三角形

首先,画一个深色的三角形:

<div class="chat-msg"></div>    
    .chat-msg{
            width: 300px;
            height: 80px;
            border: 1px solid #ccc;
            position: relative;
            margin: 100px;
        }
        .chat-msg::before{
            content: ‘‘;
            position: absolute;
            top: 34px;
            left: -10px;
            border-top: 6px solid transparent;
            border-bottom:  6px solid transparent;
            border-right: 10px solid #ccc;
        }    

技术分享图片

然后画一个白色的三角形盖上去,错误两个像素,就可以实现。利用chat-msg的伪类元素after实现

      .chat-msg::after{
            content: ‘‘;
            position: absolute;
            top: 34px;
            left: -8px;
            border-top: 6px solid transparent;
            border-bottom:  6px solid transparent;
            border-right: 10px solid #fff;
        }

 技术分享图片

另外,使用filter添加阴影效果

.chat-msg{
     filter: drop-shadow(0 0 2px #999);
     background-color: #fff;
}

技术分享图片

以上实现带阴影三角形对话框的步骤。

 

 

Effective前端1---chapter 2 用CSS画一个三角形

标签:idt   一个   img   before   com   round   inf   增加   nbsp   

原文地址:https://www.cnblogs.com/alex-415/p/9725242.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!